<template>
    <div id="root" v-loading.fullscreen.lock="loading"
         :element-loading-text="$t('tips.loadingmsg')"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
  
      <!--百度地图控件-->
      <baidu-map class="map"
                   @ready="handler"
                   :scroll-wheel-zoom="true"
                   @zoomend="syncCenterAndZoom"
                   @dragend="syncCenterAndZoom"
                   @tilesloaded="syncCenterAndZoom1"
                  :center="{ lng: 116.404, lat: 39.915 }" 
                  :zoom="4" 
                   @rightdblclick="setcenter">
        <!--自定义设备类型过滤控件-->
        <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :offset="filterOffset">
            <el-popover
              placement="left-start"
              padding="0"
              trigger="click"
              popper-class="filterstyle">
                <el-tabs type="border-card" class="card">
                  <el-tab-pane :label="$t('title.roadlampsystem_frontpage_maptools_title_lighting')">
                    <div class="line"></div>
                    <div>
                      <div>
                        <span  class="devicename deviceleft">{{$t('menu.pole')}}</span>
                        <span class="deviceright"><el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">{{$t('button.selection')}}</el-checkbox></span>
                      </div>
                      <div class="deviceleft devicebottom">
                        <div style="margin: 5px 0;"></div>
                        <el-checkbox-group v-model="checkedLampOptions" @change="handleCheckedLampsChange">
                          <el-checkbox :label="lamps[0]" :key="lamps[0]"><div class="deviceimg"><img  :title="lamps[0]" src="@/assets/image/zlamp1.png"></div></el-checkbox>
                          <el-checkbox :label="lamps[1]" :key="lamps[1]"><div class="deviceimg"><img  :title="lamps[1]" src="@/assets/image/zlamp2.png"></div></el-checkbox>
                          <el-checkbox :label="lamps[2]" :key="lamps[2]"><div class="deviceimg"><img  :title="lamps[2]" src="@/assets/image/zlamp3.png"></div></el-checkbox>
                          <el-checkbox :label="lamps[3]" :key="lamps[3]"><div class="deviceimg"><img  :title="lamps[3]" src="@/assets/image/zlamp4.png"></div></el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              <a @click="filter" class="resetstyle" slot="reference">
                <div class="maptoolsimg">
                  <img src="@/assets/image/filter.png" :title="$t('tips.roadlampsystem_frontpage_maptools_tips_filter')" style="width:16px;height:16px;display: inline-block; vertical-align: middle;" />
                </div>
              </a>
            </el-popover>
        </bm-control>
        <!--自定义地图缩放控件-->
        <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :offset="zoomOffset">
          <div class="zoom">
            <div :title="$t('tips.roadlampsystem_frontpage_maptools_tips_zoomin')" @click="zoomin" class="zoomin"></div>
            <div class="zoom_line"></div>
            <div :title="$t('tips.roadlampsystem_frontpage_maptools_tips_zoomout')" @click="zoomsmall" class="zoomsmall"></div>
          </div>
        </bm-control>
        <!--自定义定位还原控件-->
        <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :offset="resetOffset">
          <a @click="reset" class="resetstyle">
            <div class="maptoolsimg">
            <img src="@/assets/image/reset.png" :title="$t('tips.roadlampsystem_frontpage_maptools_tips_restore')" style="display: inline-block; vertical-align: middle;"></img>
            </div>
          </a>
        </bm-control>
  
        <!--覆盖物绘制（配电箱、回路、灯杆）-->
        <bml-marker-clusterer
          :averageCenter="true"
          :maxZoom = 15>
          <!--覆盖物绘制（灯杆）-->
          <!-- <bm-marker v-if="checkedLampOptions.indexOf(lampOptions[0])>=0" v-for="marker of oblamp1"
                   :key="marker.id"
                   @mouseover="showdraw(marker)"
                   @mouseout="infoWindowClose"
                   :icon="{url:objimg.control.img1_control,size:{width: 30, height: 20}}"
                   :position="{lng: marker.longitude, lat: marker.latitude}"
                   @click="looklampDetail(marker,$event)"
                   @rightclick="opencontrolpanel(marker,0)">
        </bm-marker> -->
          <!-- <bm-marker v-if="checkedLampOptions.indexOf(lampOptions[1])>=0" v-for="marker of oblamp2"
                   :key="marker.id"
                   @mouseover="showdraw(marker)"
                   @mouseout="infoWindowClose"
                   :icon="{url:objimg.control.img2_control,size:{width: 30, height: 20}}"
                   :position="{lng: marker.longitude, lat: marker.latitude}"
                   @rightclick="opencontrolpanel(marker,0)"
                   @click="looklampDetail(marker)">
        </bm-marker>
          <bm-marker v-if="checkedLampOptions.indexOf(lampOptions[2])>=0" v-for="marker of oblamp3"
                   :key="marker.id"
                   @mouseover="showdraw(marker)"
                   @mouseout="infoWindowClose"
                   :icon="{url:objimg.control.img3_control,size:{width: 30, height: 20}}"
                   :position="{lng: marker.longitude, lat: marker.latitude}"
                   @rightclick="opencontrolpanel(marker,0)"
                   @click="looklampDetail(marker)">
        </bm-marker>-->
          <!-- <bm-marker v-if="checkedLampOptions.indexOf(lampOptions[3])>=0" v-for="marker of oblamp4"
                     :key="marker.id"
                     @mouseover="showdraw(marker)"
                     @mouseout="infoWindowClose"
                     :icon="{url:objimg.control.img4_control,size:{width: 30, height: 20}}"
                     :position="{lng: marker.longitude, lat: marker.latitude}"
                     @rightclick="opencontrolpanel(marker,0)"
                     @click="looklampDetail(marker,$event)">
          </bm-marker>  -->
        </bml-marker-clusterer>
        <!--信息窗体-->
  
        <!--灯杆控制窗体-->
      </baidu-map>


      <div class="windowinfocontain" ref="lampcontrol" v-show="infoWindowcontrol.show">
            <div class="markercontrolinfo">
              <el-radio-group v-model="radio_lamp" size="mini" @change="histTypeUpdate" style="width:100%">
                <el-radio-button :label="$t('title.single')"></el-radio-button>
                <el-radio-button :label="$t('title.region')"></el-radio-button>
              </el-radio-group>
              <ul class="box-card">
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'100','on')" @mouseover="dimmerDialogVisible=false" >
                  {{$t('title.turnon')}}
                </li>
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'0','off')" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.turnoff')}}
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                 <!--   <span class="el-dropdown-link dimmer" @mouseover="hover" @mouseleave="leave">
                      {{$t('title.dimmer')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                     <span class="el-dropdown-link dimmer1" @mouseover="hover" @mouseleave="leave">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming1')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                    <!-- <span class="el-dropdown-link dimmer2" @mouseover="hover2" @mouseleave="leave">
                      {{$t('title.colortemp')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                    <span class="el-dropdown-link dimmer2" @mouseover="hover2(0)" @mouseleave="leave">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming2')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" @click="resumelamp(infoWindowcontrol.info,0)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.resume')}}
                </li>
                <li class="textitem topline" v-if="!readlampenable" @click="readlampstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li>
                <!-- <li class="textitem" v-if="!readlampenable" @click="readlampstrategy(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readstrategy')}}
                </li> -->
                <!-- <li class="textitem" v-if="!readlampenable" @click="readParameterstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li> -->
              </ul>
            </div>
          </div>
      <!--顶部左侧搜索栏-->
      <div class="searchcontainer">
        <a class="resetstyle" style="width: 10%" id="menu_black">
          <img src="@/assets/image/menu_black.png" id="menuimg"></img>
        </a>
        <span id="queryinput" @click="getfocus">
        <el-input
          id="Panel"
          v-model="search"
          style="width: 70%;z-index: 0"
          @keyup.enter.native="query"
          @focus.native="getfocus"
          @input = "querychange"
          @clear = "querychange"
          clearable
          :placeholder="$t('tips.mapinputPlaceHolder')">
        </el-input>
        </span>
        <a class="resetstyle" @click="query" style="width: 10%">
          <div id="searchline"></div>
          <img src="@/assets/image/search.png" :title="$t('tips.maptoolquery')" id="queryimg"></img>
        </a>
      </div>
      <div class="fastsearchcontainer" v-show="QuickquerydialogVisible">
        <div class="fastsearchtitle">{{$t('title.quicksearch')}}</div>
        <div style="height: 300px">
          <div class="fastsearchcontent">
            <div class="searchicon">
              <ul>
                <li class="grid-content bgcolor3 fastsearch-device"><img class="bg-purple" src='@/assets/image/lamp5.png' @click="querydevice(3)" :title="$t('menu.pole')"></img></li>
              </ul>
            </div>
            <!--查询结果表-->
            <div class="querytable" v-show="QuerydialogVisible1" style="height: 300px;flex:1">
              <el-table
                :show-header= false
                :data="queryData"
                @row-click="rtulocation"
                :cell-class-name="addClass"
                style="width: 100%;z-index: 0"
                height="270px"
                :border="false">
                <el-table-column
                  prop="deviceName"
                  fixed>
                </el-table-column>
              </el-table>
              <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size=perpage
              layout="total, prev, next"
              :total="total">
            </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="querybox" id="popView">
        <div class="top_left_search">
          <div class="linebar1" v-show="panetogglevisible"></div>
          <div class="querytable" v-show="QuerydialogVisible">
          <el-table
            :show-header= false
            :data="queryData"
            @row-click="lamplocation"
            :cell-class-name="addClass"

            style="width: 100%;z-index: 0"
            height="200px">
            <el-table-column
              prop="deviceName"
              fixed>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size=perpage
            layout="total, prev, next"
            :total="total">
          </el-pagination>
        </div>
          <div class="linebar2" v-show="panetogglevisible"></div>
  
          <!--功能导航栏-->
          <div v-show="panetogglevisible" class="panetoggle">
            <el-menu
                :unique-opened ="true"
                class="el-menu-vertical-demo"
                @open="handleSelectMenu"
                @close="handleCloseMenu"
                :default-openeds="openeds">
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{$t('menu.device')}}</span>
                  </template>
                  <el-menu-item-group>
                    <!--
                    <el-menu-item index="2-1" @click="clicknav('2-1')">{{$t('menu.rtu')}}</el-menu-item>
                    -->
                    <el-menu-item  @click="clicknav('2-2',item)" v-for="(item,index) in leftBarList" :key="item.id" :index="'2-'+index">{{item.name}}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-help"></i>
                    <span>{{$t('menu.deviceControl')}}</span>
                  </template>
                </el-submenu>
                 <el-submenu index="5">
                  <template slot="title">
                    <i class="el-icon-s-claim"></i>
                    <span>{{$t('menu.strategyName')}}</span>
                  </template>

                  <el-menu-item-group>
                    <el-menu-item index="5-1" @click="clicknav('5-1')">{{$t('menu.roadlampsystem_background_menu_policymanagement')}}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>{{$t('menu.form')}}</span>
                  </template>
  
                  <el-menu-item-group>
                    <el-menu-item index="3-2" @click="clicknav('3-2')">{{$t('menu.alarmlog')}}</el-menu-item>
                    <el-menu-item index="3-3" @click="clicknav('3-3')">{{$t('menu.freezedata')}}</el-menu-item>
                    <el-menu-item index="3-4" @click="clicknav('3-4')">{{$t('menu.tunnellightingsystem_frontpage_menu_energyanalysis')}}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
          </div>
  
        </div>
        <div class="button-container" id="popView-button" v-show="panetogglevisible">
          <div class="button-pane-toggle"></div>
        </div>
      </div>
  
      <!--顶部功能栏-->
      <div class="hd-main clearfix" id="header">
        <!--<a class="logo" href="http://www.core-on.com/"  target="_blank" v-show="TopbardialogVisible"></a>-->
        <a class="logo" v-show="TopbardialogVisible"></a>
        <div class="navs" v-show="TopbardialogVisible">
        </div>
        <div class="info" v-show="TopbardialogVisible">
          <div class="alarminfo" v-show="TopbardialogVisible">
            <div class="userimg" @click="alarmshow">
              <el-badge :value=eventtotal class="item">
                <img src="@/assets/image/alarm.gif" alt>
              </el-badge>
            </div>
          </div>
        </div>
  
      </div>
  
      <!--顶部功能栏隐藏时，简易工具栏-->
      <div class="top-bar" v-show="TopAlarmbardialogVisible">
         <!--顶部报警栏-->
        <el-badge :value=eventtotal class="item">
          <div class="top-left" v-show="TopAlarmbardialogVisible" @click="alarmshow">
          <span class="top-left-alarmimg"><img src="@/assets/image/redlight.png" alt></span>
          <span>{{$t('title.faultalarm')}}</span>
        </div>
        </el-badge>
      </div>
  
      <!--导航栏中运行二级菜单栏下的三级菜单栏(灯杆)-->
      <transition name="el-zoom-in-left">
        <div class="modal_device" v-if="Lampdialog1Visible" id= "lampdialog">
          <!--灯控器窗口标题头-->
          <div class="modal_head"  @mousedown="lampmousedown">
            {{productName}}
            <span class="closedbtn" @click="Lampdialog1Visible=false"></span>
          </div>
  
          <Lamp @lampmaxshow="fromgateway" @lampmsg="lamplocation" @alarminfo="getalarminfo" @lampmange="lampmange" :productId="productId" ref="device_lamp"></Lamp>
        </div>
      </transition>
  
  
  
      <!--导航栏中报表二级菜单栏下的三级菜单栏(报警日志)-->
      <transition name="el-zoom-in-left">
        <div class="modal_forms" v-if="AlarmlogdialogVisible" id= "alarmlogdialog">
          <!--报警日志详细信息窗口标题头-->
          <div class="modal_head" @mousedown="alarmlogmousedown">
            {{$t('title.alarmlog')}}
            <span class="closedbtn" @click="AlarmlogdialogVisible=false"></span>
          </div>
  
          <AlarmlogForm></AlarmlogForm>
        </div>
      </transition>
  
      <!--导航栏中报表二级菜单栏下的三级菜单栏(冻结数据日志)-->
      <transition name="el-zoom-in-left">
        <div class="modal_forms_free" v-if="FreezedatadialogVisible" id= "freezedatadialog">
          <!--冻结数据详细信息窗口标题头-->
          <div class="modal_head" @mousedown="freezedatamousedown">
            {{$t('title.freezingdata')}}
            <span class="closedbtn" @click="FreezedatadialogVisible = false"></span>
          </div>
  
          <FreezedataForm :productList="leftBarList"></FreezedataForm>
        </div>
      </transition>

      <transition name="el-zoom-in-left">
        <div class="modal_forms2 modal_freezedata" v-if="energyanalysisVisible" id= "freezedatadialog">
          <!--能耗分析详细信息窗口标题头-->
          <div class="modal_head" @mousedown="freezedatamousedown">
            {{$t('menu.tunnellightingsystem_frontpage_menu_energyanalysis')}}
            <span class="closedbtn" @click="energyanalysisVisible = false"></span>
          </div>
  
          <Energyanalysis></Energyanalysis>
        </div>
      </transition>


      <transition name="el-zoom-in-left">
        <div class="modal_forms" style="width:1200px;height:700px" v-if="strategydialogVisible" id= "freezedatadialog">
          <!--策略管理详细信息窗口标题头-->
          <div class="modal_head" @mousedown="freezedatamousedown">
            {{$t('menu.roadlampsystem_background_menu_policymanagement')}}
            <span class="closedbtn" @click="strategydialogVisible = false"></span>
          </div>
  
          <StrategydataForm></StrategydataForm>
        </div>
      </transition>

  
  
      <!--灯控器放大全屏-->
      <transition name="el-zoom-in-center">
        <div class="modal_devicemax" v-if="LampdialogmaxVisible">
          <lamp-max @lampmaxclose="fromgateway" :productId="productId"></lamp-max>
        </div>
      </transition>
  
      <!--报警页面-->
      <transition name="el-zoom-in-top">
        <div class="modal_list" v-if="NewalarmdialogVisible" id = "newalarmdialog">
          <!--新的报警信息窗口标题头-->
          <div class="modal_head" @mousedown="newalarmmousedown">
            {{$t('menu.realtimealarm')}}
            <span class="closedbtn" @click="NewalarmdialogVisible = false"></span>
          </div>
  
          <NewAlarm @alarmmsg="lamplocation" @getEventCount="getAllLarmCount" @openalarmlog = "openalarmlog"></NewAlarm>
        </div>
      </transition>

      <transition name="el-zoom-in-left">
        <div class="modal_deviceControl" v-if="deviceControlVisible">
          <!--灯控器窗口标题头-->
          <div class="modal_head">
              {{$t('menu.deviceControl')}}
            <span class="closedbtn" @click="closeLeftMenu"></span>
          </div>
  
          <div class="rtuinfo2">
                <el-row>
                  <el-cascader size="mini"
                               :options="menudata"
                               v-model="controlVal"
                               @change="menuchange"
                               :show-all-levels="true"
                               :placeholder="$t('title.tunnellightingsystem_systemmanagement_title_pleaseselectcommand')">
                  </el-cascader>
                  <el-button type="primary" size="mini" style="float:right" @click="executeOrder">{{$t('label.roadlampsystem_frontpage_label_execute')}}</el-button>
                </el-row>
                <el-row class="selectProduct">
                  <el-select
                    v-model="productType"
                    :placeholder="$t('title.tunnellightingsystem_systemmanagement_title_pleaseselectproductType')"
                  >
                    <el-option v-for="item in leftBarList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-row>
                <el-row class="selectProduct">
                  <el-input v-model="orderVal" :placeholder="$t('title.tunnellightingsystem_systemmanagement_title_pleaseinputdeviceorgroup')" size="mini"></el-input>
                </el-row>
                <div style="border: 1px solid #edeef0;height:380px;margin-top:5px;overflow-y: scroll;">
                <el-tree
                    :props="defaultProps"
                    :load="loadNode"
                    lazy
                    ref="tree"
                    node-key="id"
                    highlight-current
                    @node-click="handleNodeClick"
                    :check-strictly="true"
                    @check="handleCheckChange"
                    :filter-node-method="filterNode"
                    show-checkbox>
                    <span class="slot-t-node" slot-scope="{ node, data }">
                      <template>
                        <span v-if="data.groupId" class="group-node"></span>
                        <span v-if="data.serialNumber" class="device-node"></span>
                        <span :style="data.groupId? 'color: orange' 
                          : data.serialNumber ? 'color: #59D65E' 
                         : data.id==0 ? 'color:red' : 'color:#3586ff'">{{ node.label}}</span>
                      </template>
                    </span>
                </el-tree>
              </div>
              </div>
        </div>
      </transition>
  
      <!--调光信息-->
      <div class="dimmervalue" v-show="dimmerDialogVisible" @mouseover="hover1" @mouseleave="leave1">
        <ul class="box-card">
          <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'0')">
            0%
          </li>
          <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'20')">
            20%
          </li>
          <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'40')">
            40%
          </li>
          <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'60')">
            60%
          </li>
          <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'80')">
            80%
          </li>
          <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'100')">
            100%
          </li>
        </ul>
      </div>

      <el-dialog
        title="设备状态"
        :visible.sync="stateRead"
        width="20%"
        :before-close="handleClose"
        >
        <div>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_devicename')}}：{{deviceNameInfo.name}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_equipmentnumber')}}：{{deviceNameInfo.serialNumber}}</p>
            <p>{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming')}}1：{{readObject.DRA_Dim}}%</p>
            <p>{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming')}}2：{{readObject.DRA_Color}}%</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_workingvoltage')}}：{{readObject.DRA_Voltage}}V</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_workingcurrent')}}：{{readObject.DRA_Current}}A</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_operatingpower')}}：{{readObject.DRA_Power}}W</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_positiveactiveelectrical')}}：{{readObject.DRA_Energy}}Kw*h</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_manualautomaticstate')}}：
              {{readObject.DRA_Hand=="1" ? $t('label.roadlampsystem_frontpage_label_manual') : readObject.DRA_Hand=="0" ? $t('label.roadlampsystem_frontpage_label_auto') :''}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_automaticworkingmode')}}：
              {{readObject.DRA_Mode == "0" ? $t('menu.timetable') : readObject.DRA_Mode == "1" ? $t('title.tunnellightingsystem_systemmanagement_title_latitudeandlongitude') : readObject.DRA_Mode == "2" ? $t('title.tunnellightingsystem_systemmanagement_title_scenemode') :''}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_worktemp')}}：{{readObject.DRA_Temp}}℃</p>
            <!-- <p>{{$t('title.tunnellightingsystem_systemmanagement_title_calibrateclockstatus')}}：
              {{readObject.DRA_TimeFlag=="1" ? $t('title.tunnellightingsystem_systemmanagement_title_notcalibrated') : readObject.DRA_TimeFlag=="0" ? $t('title.tunnellightingsystem_systemmanagement_title_calibrated') :''}}</p> -->
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_lightingduration')}}：{{readObject.DRA_LightTime}}min</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="stateRead = false,readObject={},modelType=''">{{$t('title.tunnellightingsystem_systemmanagement_title_confirm')}}</el-button>
        </span>
    </el-dialog>

    <el-dialog
        :title="$t('title.tunnellightingsystem_systemmanagement_title_equipmentparameters')"
        :visible.sync="parameterRead"
        width="20%"
        :before-close="handleClose2"
        >
        <div>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_groupid')}}：{{readObject.DBA_Group}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_dimmingsignallogic')}}：
              {{readObject.DBA_DLogic=="1" ? $t('title.tunnellightingsystem_systemmanagement_title_reversechange') : readObject.DBA_DLogic=="0" ? $t('title.tunnellightingsystem_systemmanagement_title_forwardchange') :''}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_dimmingsignalamplitude')}}：{{readObject.DBA_DAmp=="1" ? "0-10V" : readObject.DBA_DAmpc=="0" ? "0-5v" :""}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_relaymode')}}：{{readObject.DBA_Switch=="1" ? $t('title.tunnellightingsystem_systemmanagement_title_normallyclosedrelay') 
              : readObject.DBA_Switchc=="0" ? $t('title.tunnellightingsystem_systemmanagement_title_normallyopenedrelay') : ''}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_workingvoltageoverloadthreshold')}}：{{readObject.DBA_Volt}}V</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_workingcurrentoverloadthreshold')}}：{{readObject.DBA_Current}}A</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_powerondimmingvalue')}}：{{readObject.DBA_Dim}}%</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_poweroncolorvalue')}}：{{readObject.DBA_Cct}}%</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_dimminggradientperiod')}}：{{readObject.DBA_DimG}}ms</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_devicerunningclock')}}：{{readObject.DBA_RTime}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_changewokemode')}}：
              {{readObject.DBA_Mode == "0" ? $t('menu.timetable') : readObject.DBA_Mode == "1" ? $t('title.tunnellightingsystem_systemmanagement_title_latitudeandlongitude') : readObject.DBA_Mode == "2" ?
               $t('title.tunnellightingsystem_systemmanagement_title_scenemode') : ''}}</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_voltagesamplingcoefficient')}}：{{readObject.DBA_VoltC}}V</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_currentsamplingcoefficient')}}：{{readObject.DBA_CurrentC}}A</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_currentlimitpercentage')}}：{{readObject.DBA_CurrentL}}%</p>
            <p>{{$t('title.tunnellightingsystem_systemmanagement_title_softwareversionnumber')}}：{{readObject.DBA_Ver}}</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="parameterRead = false,readObject={},modelType=''">{{$t('title.tunnellightingsystem_systemmanagement_title_confirm')}}</el-button>
        </span>
    </el-dialog>

    <div class="windowinfocontain" ref="windowinfocontain" v-show="infoWindow.show">
            <div class="markerinfo">
              <div id="markertitle">
                <div class="infoWindowtitle">{{$t('title.tunnellightingsystem_systemmanagement_title_basicinformationoflamp')}}</div>
              </div>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicename')}}：</span><span class="right" style="color:#409EFF">{{infoWindow.info.name}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.deviceid')}}</span><span class="right">{{infoWindow.info.comid}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicestauts')}}：</span><span class="right">{{infoWindow.info.status}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_deviceshadow')}}：</span><span class="right" :style="{color:infoWindow.info.isShadow == 1 ? 'green' : '#696969'}">{{infoWindow.info.isShadow == 1 ? $t('menu.enable') : $t('menu.disable')}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('tips.productinputPlaceHolder')}}：</span><span class="right">{{infoWindow.info.productName}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_firmwareversion')}}：</span><span class="right">Version {{infoWindow.info.firmwareVersion}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_activetime')}}：</span><span class="right">{{infoWindow.info.activeTime}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locatemode')}}：</span><span class="right">{{infoWindow.info.locationWay}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locationaddress')}}：</span><span class="right">{{infoWindow.info.networkAddress}}</span></p>
            </div>
    </div>

    <div class="windowinfocontain" ref="windowinfocontain2" v-show="infoWindow.show2">
            <div class="markerinfo">
              <div id="markertitle">
                <div class="infoWindowtitle">{{$t('title.tunnellightingsystem_systemmanagement_title_basicinformationoflamp')}}</div>
              </div>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicename')}}：</span><span class="right" style="color:#409EFF">{{infoWindow.info.name}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.deviceid')}}</span><span class="right">{{infoWindow.info.comid}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicestauts')}}：</span><span class="right">{{infoWindow.info.status}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_deviceshadow')}}：</span><span class="right" :style="{color:infoWindow.info.isShadow == 1 ? 'green' : '#696969'}">{{infoWindow.info.isShadow == 1 ? $t('menu.enable') : $t('menu.disable')}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('tips.productinputPlaceHolder')}}：</span><span class="right">{{infoWindow.info.productName}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_firmwareversion')}}：</span><span class="right">Version {{infoWindow.info.firmwareVersion}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_activetime')}}：</span><span class="right">{{infoWindow.info.activeTime}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locatemode')}}：</span><span class="right">{{infoWindow.info.locationWay}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locationaddress')}}：</span><span class="right">{{infoWindow.info.networkAddress}}</span></p>
            </div>
    </div>

    <div class="windowinfocontain" ref="windowinfocontain3" v-show="infoWindow.show3">
            <div class="markerinfo">
              <div id="markertitle">
                <div class="infoWindowtitle">{{$t('title.tunnellightingsystem_systemmanagement_title_basicinformationoflamp')}}</div>
              </div>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicename')}}：</span><span class="right" style="color:#409EFF">{{infoWindow.info.name}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.deviceid')}}</span><span class="right">{{infoWindow.info.comid}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicestauts')}}：</span><span class="right">{{infoWindow.info.status}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_deviceshadow')}}：</span><span class="right" :style="{color:infoWindow.info.isShadow == 1 ? 'green' : '#696969'}">{{infoWindow.info.isShadow == 1 ? $t('menu.enable') : $t('menu.disable')}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('tips.productinputPlaceHolder')}}：</span><span class="right">{{infoWindow.info.productName}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_firmwareversion')}}：</span><span class="right">Version {{infoWindow.info.firmwareVersion}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_activetime')}}：</span><span class="right">{{infoWindow.info.activeTime}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locatemode')}}：</span><span class="right">{{infoWindow.info.locationWay}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locationaddress')}}：</span><span class="right">{{infoWindow.info.networkAddress}}</span></p>
            </div>
    </div>

    <div class="windowinfocontain" ref="windowinfocontain4" v-show="infoWindow.show4">
            <div class="markerinfo">
              <div id="markertitle">
                <div class="infoWindowtitle">{{$t('title.tunnellightingsystem_systemmanagement_title_basicinformationoflamp')}}</div>
              </div>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicename')}}：</span><span class="right" style="color:#409EFF">{{infoWindow.info.name}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.deviceid')}}</span><span class="right">{{infoWindow.info.comid}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_devicestauts')}}：</span><span class="right">{{infoWindow.info.status}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_deviceshadow')}}：</span><span class="right" :style="{color:infoWindow.info.isShadow == 1 ? 'green' : '#696969'}">{{infoWindow.info.isShadow == 1 ? $t('menu.enable') : $t('menu.disable')}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('tips.productinputPlaceHolder')}}：</span><span class="right">{{infoWindow.info.productName}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_firmwareversion')}}：</span><span class="right">Version {{infoWindow.info.firmwareVersion}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_activetime')}}：</span><span class="right">{{infoWindow.info.activeTime}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locatemode')}}：</span><span class="right">{{infoWindow.info.locationWay}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_locationaddress')}}：</span><span class="right">{{infoWindow.info.networkAddress}}</span></p>
            </div>
    </div>

    <div class="windowinfocontain" ref="lampcontrol2" v-show="infoWindowcontrol.show2">
            <div class="markercontrolinfo">
              <el-radio-group v-model="radio_lamp" size="mini" @change="histTypeUpdate" style="width:100%">
                <el-radio-button :label="$t('title.single')"></el-radio-button>
                <el-radio-button :label="$t('title.region')"></el-radio-button>
              </el-radio-group>
              <ul class="box-card">
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'100','on')" @mouseover="dimmerDialogVisible=false" >
                  {{$t('title.turnon')}}
                </li>
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'0','off')" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.turnoff')}}
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                 <!--   <span class="el-dropdown-link dimmer" @mouseover="hover" @mouseleave="leave">
                      {{$t('title.dimmer')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                     <span class="el-dropdown-link dimmer3" @mouseover="hover(1)" @mouseleave="leave(1)">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming1')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                    <!-- <span class="el-dropdown-link dimmer2" @mouseover="hover2" @mouseleave="leave">
                      {{$t('title.colortemp')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                    <span class="el-dropdown-link dimmer4" @mouseover="hover2(1)" @mouseleave="leave(1)">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming2')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" @click="resumelamp(infoWindowcontrol.info,0)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.resume')}}
                </li>
                <li class="textitem topline" v-if="!readlampenable" @click="readlampstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li>
                <!-- <li class="textitem" v-if="!readlampenable" @click="readlampstrategy(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readstrategy')}}
                </li> -->
                <!-- <li class="textitem" v-if="!readlampenable" @click="readParameterstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li> -->
              </ul>
            </div>
          </div>

      <div class="windowinfocontain" ref="lampcontrol3" v-show="infoWindowcontrol.show3">
            <div class="markercontrolinfo">
              <el-radio-group v-model="radio_lamp" size="mini" @change="histTypeUpdate" style="width:100%">
                <el-radio-button :label="$t('title.single')"></el-radio-button>
                <el-radio-button :label="$t('title.region')"></el-radio-button>
              </el-radio-group>
              <ul class="box-card">
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'100','on')" @mouseover="dimmerDialogVisible=false" >
                  {{$t('title.turnon')}}
                </li>
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'0','off')" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.turnoff')}}
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                 <!--   <span class="el-dropdown-link dimmer" @mouseover="hover" @mouseleave="leave">
                      {{$t('title.dimmer')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                     <span class="el-dropdown-link dimmer5" @mouseover="hover(2)" @mouseleave="leave(2)">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming1')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                    <!-- <span class="el-dropdown-link dimmer2" @mouseover="hover2" @mouseleave="leave">
                      {{$t('title.colortemp')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                    <span class="el-dropdown-link dimmer6" @mouseover="hover2(2)" @mouseleave="leave(2)">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming2')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" @click="resumelamp(infoWindowcontrol.info,0)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.resume')}}
                </li>
                <li class="textitem topline" v-if="!readlampenable" @click="readlampstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li>
                <!-- <li class="textitem" v-if="!readlampenable" @click="readlampstrategy(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readstrategy')}}
                </li> -->
                <!-- <li class="textitem" v-if="!readlampenable" @click="readParameterstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li> -->
              </ul>
            </div>
          </div>

        <div class="windowinfocontain" ref="lampcontrol4" v-show="infoWindowcontrol.show4">
            <div class="markercontrolinfo">
              <el-radio-group v-model="radio_lamp" size="mini" @change="histTypeUpdate" style="width:100%">
                <el-radio-button :label="$t('title.single')"></el-radio-button>
                <el-radio-button :label="$t('title.region')"></el-radio-button>
              </el-radio-group>
              <ul class="box-card">
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'100','on')" @mouseover="dimmerDialogVisible=false" >
                  {{$t('title.turnon')}}
                </li>
                <li class="textitem" @click="dimmerlamp(infoWindowcontrol.info,'0','off')" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.turnoff')}}
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                 <!--   <span class="el-dropdown-link dimmer" @mouseover="hover" @mouseleave="leave">
                      {{$t('title.dimmer')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                     <span class="el-dropdown-link dimmer7" @mouseover="hover(3)" @mouseleave="leave(3)">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming1')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" v-if="infoWindowcontrol.info.mcontrols != true">
                    <!-- <span class="el-dropdown-link dimmer2" @mouseover="hover2" @mouseleave="leave">
                      {{$t('title.colortemp')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span> -->
                    <span class="el-dropdown-link dimmer8" @mouseover="hover2(3)" @mouseleave="leave(3)">
                      {{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimming2')}}<i class="el-icon-arrow-right" style="float: right;margin-right: 5px"></i>
                    </span>
                </li>
                <li class="textitem" @click="resumelamp(infoWindowcontrol.info,0)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.resume')}}
                </li>
                <li class="textitem topline" v-if="!readlampenable" @click="readlampstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li>
                <!-- <li class="textitem" v-if="!readlampenable" @click="readlampstrategy(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readstrategy')}}
                </li> -->
                <!-- <li class="textitem" v-if="!readlampenable" @click="readParameterstate(infoWindowcontrol.info)" @mouseover="dimmerDialogVisible=false">
                  {{$t('title.readparameter')}}
                </li> -->
              </ul>
            </div>
          </div>


          <div class="windowinfocontain" ref="clusterLayer" v-show="clusterLayerVisible">
            <div class="markerinfo" style="height:130px">
              <div id="markertitle">
                <div class="infoWindowtitle">{{$t('title.tunnellightingsystem_systemmanagement_title_projectinformation')}}</div>
              </div>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_institutionname')}}：</span><span class="right" style="color:#409EFF">{{infoWindow.info.name}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_deviceNums')}}</span><span class="right">{{infoWindow.info.comid}}</span></p>
                <p class="deviceSytle"><span class="left">{{$t('title.tunnellightingsystem_systemmanagement_title_onlineNums')}}：</span><span class="right">{{infoWindow.info.status}}</span></p>
            </div>
    </div>

    </div>
  </template>
  
<script>
import "@/assets/css/style.css";
import "@/assets/css/public.css";
import * as mapv from "mapv";
import * as mapvgl from "mapvgl";

import { Event } from "@/main.js";

//import '@/assets/js/jquery.1.11.3.min.js';
//引入样式文件
import "@/assets/css/base.css";
import img1_control from "@/assets/image/zlamp1.png";
import img2_control from "@/assets/image/zlamp2.png";
import img3_control from "@/assets/image/zlamp3.png";
import img4_control from "@/assets/image/zlamp4.png";

import Lamp from "@/components/devices/lamp";
import LampMax from "@/components/devices/lampmax";

import AlarmlogForm from "@/components/forms/alarmlogform";
import FreezedataForm from "@/components/forms/freezedataform";
import Energyanalysis from "@/components/forms/energyanalysisform";
import StrategydataForm from "@/components/forms/strategydataform";
import NewAlarm from "@/components/forms/newalarm";

import global from "@/assets/js/Global";
import {
  listAllDeviceShort,
  getDevice,
  listDeviceShort,
  getDeviceDetail,
} from "@/api/iot/device";
import {
  getDeviceRunningStatus,
  setOrgCenter,
  getOrgCenter,
  getDeviceAlarmDetail,
  deptsTreeSelect,
} from "@/api/iot/device";
import { cacheJsonThingsModel } from "@/api/iot/model";
import { listProduct, listShortProduct } from "@/api/iot/product";
import { listAlertLog } from "@/api/iot/alertLog";
import { getDeptUserId } from "@/utils/auth";
import {
  serviceInvoke,
  readMultiInvoke,
  serviceMultiInvoke,
  broadcastMultiInvoke,
} from "@/api/iot/runstatus";

const menudata_zh = [{
  value: 'read',
  label: '读取',
  children: [
    {
      value: 'status',
      label: '状态',
    }]
  },
  {
    value: 'control',
    label: '控制',
    children: [{
      value: 'on',
      label: '开',
    },{
      value: 'off',
      label: '关',
    },{
      value: 'dimmer',
      label: '调光',
      children: [{
        value: '0',
        label: '0%',
      },{
        value: '10',
        label: '10%',
      },{
        value: '20',
        label: '20%',
      },{
        value: '30',
        label: '30%',
      }, {
        value: '40',
        label: '40%',
      },{
        value: '50',
        label: '50%',
      },{
        value: '60',
        label: '60%',
      },{
        value: '70',
        label: '70%',
      }, {
        value: '80',
        label: '80%',
      },{
        value: '90',
        label: '90%',
      },{
        value: '100',
        label: '100%',
      }],
    },
    {
      value: 'dimmer2',
      label: '色温',
      children: [{
        value: '0',
        label: '0%',
      },{
        value: '10',
        label: '10%',
      },{
        value: '20',
        label: '20%',
      },{
        value: '30',
        label: '30%',
      }, {
        value: '40',
        label: '40%',
      },{
        value: '50',
        label: '50%',
      },{
        value: '60',
        label: '60%',
      },{
        value: '70',
        label: '70%',
      }, {
        value: '80',
        label: '80%',
      },{
        value: '90',
        label: '90%',
      },{
        value: '100',
        label: '100%',
      }],
    },
     {
      value: 'resume',
      label: '恢复',
    }],
  }];
const menudata_en = [{
  value: 'read',
  label: 'Read',
  children: [
    {
      value: 'status',
      label: 'Status',
    }]
},
{
  value: 'control',
  label: 'Control',
  children: [{
    value: 'on',
    label: 'On',
  },{
    value: 'off',
    label: 'Off',
  },{
    value: 'dimmer',
    label: 'Dimmer',
    children: [{
      value: '0',
      label: '0%',
    },{
      value: '10',
      label: '10%',
    },{
      value: '20',
      label: '20%',
    },{
      value: '30',
      label: '30%',
    }, {
      value: '40',
      label: '40%',
    },{
      value: '50',
      label: '50%',
    },{
      value: '60',
      label: '60%',
    },{
      value: '70',
      label: '70%',
    }, {
      value: '80',
      label: '80%',
    },{
      value: '90',
      label: '90%',
    },{
      value: '100',
      label: '100%',
    }],
  },
  {
      value: 'dimmer2',
      label: 'dimmer2',
      children: [{
        value: '0',
        label: '0%',
      },{
        value: '10',
        label: '10%',
      },{
        value: '20',
        label: '20%',
      },{
        value: '30',
        label: '30%',
      }, {
        value: '40',
        label: '40%',
      },{
        value: '50',
        label: '50%',
      },{
        value: '60',
        label: '60%',
      },{
        value: '70',
        label: '70%',
      }, {
        value: '80',
        label: '80%',
      },{
        value: '90',
        label: '90%',
      },{
        value: '100',
        label: '100%',
      }],
    }, {
    value: 'resume',
    label: 'Resume',
  }],
}];
export default {
  components: {
    Lamp,
    LampMax,
    AlarmlogForm,
    FreezedataForm,
    NewAlarm,
    Energyanalysis,
    StrategydataForm,
  },
  data() {
    return {
      changecommand:"",
      map: null,
      BMap: null,
      filterOffset: { width: 50, height: 195 },
      zoomOffset: { width: 50, height: 100 },
      resetOffset: { width: 50, height: 163 },
      infoOffset: { width: 140, height: 355 },
      lampcontrolOffset: { width: 90, height: 280 },

      username: "",
      checkAll2: true,
      lampOptions: [],

      checkedLampOptions: [],
      isIndeterminate2: true,

      center: { lng: 114.03, lat: 22.32 },
      mapcenter: global.mapcenter,
      zoom: 4,

      loading: false,

      Lampdialog1Visible: false,
      LampdialogmaxVisible: false,

      AlarmlogdialogVisible: false,
      FreezedatadialogVisible: false,
      NewalarmdialogVisible: false,
      energyanalysisVisible: false,
      strategydialogVisible: false,

      TopAlarmbardialogVisible: true,
      QuerydialogVisible1: false,
      TopbardialogVisible: false,
      QuickquerydialogVisible: false,
      panetogglevisible: false,

      dimmerDialogVisible: false,
      deviceControlVisible: false,
      menudata:[],
      controlVal:"",
      panestate: "0", //  0 : 初始状态（下来面板关闭）   1：下拉面板打开

      objdengju: [],
      objdengju1: [],
      objdengju2: [],
      objdengju3: [],
      objdengju4: [],
      oblamp1: [],
      oblamp2: [],
      oblamp3: [],
      oblamp4: [],

      objimg: {
        control: { img1_control, img2_control, img3_control, img4_control },
      },
      setTimeoutDropmenu: null, //下拉菜单超时定时器名称
      infoWindow: {
        lng: 0,
        lat: 0,
        show: false,
        show2: false,
        show3: false,
        show4: false,
        info: {
          title: "",
          id: "",
          name: "",
          comid: "",
          commodel: "",
          lat: "",
          lng: "",
        },
      },
      infoWindowcontrol: {
        lng: 0,
        lat: 0,
        show: false,
        show2: false,
        show3: false,
        show4: false,
        info: {
          id: "",
          name: "",
          comid: "",
          commodel: "",
          lat: "",
          lng: "",
          mcontrols: false,
        },
      },
      queryData: [],

      search: "",

      eventtotal: 0,

      currentPage: 1,
      perpage: 10,
      total: 0,
      url: "",
      radio_lamp: this.$t(
        "tips.tunnellightingsystem_tunnelpanoramicview_tips_single"
      ),
      readlampenable: false,
      dimmerColor: "",
      leftBarList: [],
      productId: "",
      productName: "",
      deviceListInfo: [],
      deviceInfo: {},
      //用于判断是否是设备组(modbus)
      isSubDev: false,
      // 设备开始状态
      oldDeviceStatus: null,
      stateRead: false,
      parameterRead: false,
      readObject: {},
      deviceNumber: null,
      modelType: "",
      interval: null,
      interval2: null,
      QuerydialogVisible: false,
      markerClusterer: null,
      layer1: null,
      layer2: null,
      layer3: null,
      layer4: null,
      clusterLayer:null,
      textLayer:null,
      deviceWidth: null,
      deviceItem: null,
      pointData: null,
      rightcheck: "",
      markerData1: null,
      markerData2: null,
      markerData3: null,
      zoomEnd: 0,
      zoomCenter: null,
      deviceNameInfo: {},
      defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: 'leaf'
      },
      deptOptions: [],
      projectId:"",
      clusterLayerVisible:false,
      openeds:[],
      productType:null,
      textCluList:[],
      cluList:[],
      orderVal:"",
      deviceStatus:null,
    };
  },
  created() {
    sessionStorage.setItem("lang", "zh-cn");
    this.getAllDevice();
    if (sessionStorage.lang == "zh-cn") {
      this.lampOptions = ["灯杆-开", "灯杆-关", "灯杆-故障", "灯杆-离线"];
      this.checkedLampOptions = [
        "灯杆-开",
        "灯杆-关",
        "灯杆-故障",
        "灯杆-离线",
      ];
    } else {
      this.lampOptions = ["Lamp-On", "Lamp-Off", "Lamp-Fault", "Lamp-Offline"];
      this.checkedLampOptions = [
        "Lamp-On",
        "Lamp-Off",
        "Lamp-Fault",
        "Lamp-Offline",
      ];
    }

    this.lamps = this.lampOptions;
    this.connectMqtt();
    let lampcontrol = this.$refs.lampcontrol;
    if (lampcontrol) {
      lampcontrol.addEventListener("mouseover", function (e) {
        e.stopPropagation();
      });
    }
    let lampcontrol2 = this.$refs.lampcontrol2;
    if (lampcontrol2) {
      lampcontrol2.addEventListener("mouseover", function (e) {
        e.stopPropagation();
      });
    }
    let lampcontrol3 = this.$refs.lampcontrol3;
    if (lampcontrol3) {
      lampcontrol3.addEventListener("mouseover", function (e) {
        e.stopPropagation();
      });
    }
    let lampcontrol4 = this.$refs.lampcontrol4;
    if (lampcontrol4) {
      lampcontrol4.addEventListener("mouseover", function (e) {
        e.stopPropagation();
      });
    }
    this.deviceWidth = window.screen.width;
  },
  mounted() {
    var that = this;
    this.getEventCount();
    setInterval(() => {
      this.getEventCount();
    }, 30000);
    $(document)
      .ready(function () {})
      .keydown(function (e) {
        if (e.which === 27) {
          if (that.loading == true) {
            if (sessionStorage.lang == "zh-cn") {
              that.$message.error("操作执行中止!");
            } else {
              that.$message.error("Operation execution aborted!");
            }
            that.loading = false;
            clearInterval(that.interval);
            clearTimeout(that.interval2);
          }
        }
      });

    $(document).ready(function () {
      $(".map").click(function () {
        if (that.queryData == null || that.queryData.length == 0) {
          that.QuickquerydialogVisible = false;
          if (that.panestate == "0") {
            that.queryData = [];
          } else {
          }
        }
      });

      $(".top_left_search").animate({ height: "-=101%" }, 1); //菜单块向上移动
      $("#header").animate({ height: "-=45px" }, 1); //菜单块向上移动

      that.panetogglevisible = false;
      that.panestate = "0";

      if (that.panestate == "0") {
        var isHiden = false; /*控制切换菜单*/
        var isHiden1 = false; /*控制切换菜单*/
      } else {
        var isHiden = true; /*控制切换菜单*/
        var isHiden1 = true; /*控制切换菜单*/
      }

      //var isHiden1 = true;	/*控制切换菜单*/
      $("#menu_black").click(function () {
        if (isHiden1) {
          that.TopbardialogVisible = false;
          that.NewalarmdialogVisible = false;
          that.QuerydialogVisible = false;
          $("#header").animate({ height: "-=45px" }); //菜单块向上移动
          $(".top-bar").animate({ right: "+=250px" }); //菜单块向左移动
        } else {
          that.TopbardialogVisible = true;
          $("#header").animate({ height: "+=45px" }); //菜单块向下移动
          $(".top-bar").animate({ right: "-=250px" }); //菜单块向右移动
        }
        isHiden1 = !isHiden1;
      });

      $("#menu_black").click(function () {
        if (isHiden) {
          $(".top_left_search").animate({ height: "-=101%" }); //菜单块向上移动
          that.panetogglevisible = false;
          that.QuickquerydialogVisible = false;
          that.TopAlarmbardialogVisible = true;
          that.QuerydialogVisible = false;
          that.panestate = "0";
        } else {
          $(".top_left_search").animate({ height: "+=100%" }); //菜单块向下移动
          that.panetogglevisible = true;
          that.QuickquerydialogVisible = false;
          that.TopAlarmbardialogVisible = false;
          that.QuerydialogVisible1 = false;
          that.panestate = "1";
        }
        isHiden = !isHiden;
      });
      $("#popView-button").click(function () {
        if (isHiden) {
          $("#popView").animate({ left: "-=320px" }); //菜单块向右移动
          $(".searchcontainer").animate({ left: "-=320px" }); //菜单块向右移动
          that.panestate = "0";
          that.QuickquerydialogVisible = false;
          $(".button-pane-toggle").css("transform", "rotateY(180deg)");
        } else {
          $("#popView").animate({ left: "+=320px" }); //菜单块向左移动
          $(".searchcontainer").animate({ left: "+=320px" }); //菜单块向左移动
          that.panestate = "1";
          that.QuickquerydialogVisible = false;
          $(".button-pane-toggle").css("transform", "rotateY(360deg)");
        }
        isHiden = !isHiden;
      });

      $(".def-nav,.info-i").hover(
        function () {
          $(this).find(".pulldown-nav").addClass("hover");
          $(this).find(".pulldown").show();
        },
        function () {
          $(this).find(".pulldown").hide();
          $(this).find(".pulldown-nav").removeClass("hover");
        }
      );
    });

    if(sessionStorage.lang == "zh-cn")
    {
      this.menudata = menudata_zh
    }
    else{
      this.menudata = menudata_en
    }
  },
  destroyed() {
    this.unMqttSubs();
  },
  watch: {
    zoomEnd: function (val) {
      if (this.map) {
        let zoom = this.map.getZoom();
        if (zoom === 21 && this.pointData) {
          this.addAnimation(this.pointData);
        }
      }
    },
    orderVal(val) {
      this.$refs.tree.filter(val);
    },
    textCluList(val){
      let that = this;
      if(this.textCluList.length > 0){
          let zoom = this.map.getZoom();
          if(zoom < 15){
              that.textLayer.setData(that.textCluList);
              that.clusterLayer.setData(that.cluList);
          }else{
            if(that.clusterLayer || that.textLayer){
                that.clusterLayer.clear();
                that.textLayer.clear();
            }
          }
      }else{
        if(that.clusterLayer || that.textLayer){
            that.clusterLayer.clear();
            that.textLayer.clear();
        }
      }
    }
  },
  methods: {
    getAllDevice() {
      listAllDeviceShort().then((response) => {
        this.deviceList = response.rows;
        this.deviceCount = response.total;
        this.setMqttSubs();
      });

      listShortProduct().then((res) => {
        if (res.code == 200) {
          this.leftBarList = res.data
        }
      });
    },
    /* 订阅消息 */
    setMqttSubs() {
      // 订阅当前页面设备状态和实时监测
      let topics = [];
      let topicStatus = "/+/+/status/post";
      let topicServive = "/+/+/ws/service";
      topics.push(topicStatus);
      topics.push(topicServive);
      this.$mqttTool.subscribe(topics);
    },
    unMqttSubs() {
      let topics = [];
      let topicStatus = "/+/+/status/post";
      let topicServive = "/+/+/ws/service";
      topics.push(topicStatus);
      topics.push(topicServive);
      this.$mqttTool.unsubscribe(topics);
    },
    getEventCount() {
      var page = {};
      page.perpage = this.perpage;
      page.currentPage = this.currentPage;
      page.status = 2;
      listAlertLog(page).then((response) => {
        this.eventtotal = response.total;
      });
    },
    getAllLarmCount(count) {
      this.eventtotal = count;
    },
    handler({ BMap, map }) {
      let that = this;
      this.BMap = BMap;
      this.map = map;
      map.setMapStyleV2({
        styleJson: [
          {
            featureType: "poi",
            elementType: "all", // 针对所有元素
            stylers: {
              visibility: "off", // 隐藏所有兴趣点，包括图标和名称
            },
          },
        ],
      });
      this.map.addEventListener("dblclick", function (e) {
        let obj = {
          userId: getDeptUserId(),
          latitude: e.latlng.lat,
          longitude: e.latlng.lng,
        };
        setOrgCenter(obj).then((res) => {
          if (res.code == 200) {
            that.$message.success(
              that.$t(
                "title.tunnellightingsystem_systemmanagement_title_settingsuccessful"
              )
            );
          }
        });
      });
      let params = {
        userId: getDeptUserId(),
      };
      getOrgCenter(params).then((res) => {
        if (res.latitude && res.longitude) {
          that.zoomCenter = {
            lat: res.latitude,
            lng: res.longitude,
          };
          that.map.centerAndZoom(that.zoomCenter, 15);
        }
      });
      let viewInfo = new mapvgl.View({
        map: map,
      });
      let viewInfo2 = new mapvgl.View({
        map: map,
      });
      let viewInfo3 = new mapvgl.View({
        map: map,
      });
      let viewInfo4 = new mapvgl.View({
        map: map,
      });
      /*获取当前鼠标位置*/
      function mousePosition(ev) {
        if (ev.pageX || ev.pageY) {
          return { x: ev.pageX, y: ev.pageY };
        }
        return {
          x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
          y: ev.clientY + document.body.scrollTop - document.body.clientTop,
        };
      }
      let width = 16;
      let height = 30;
      that.layer1 = new mapvgl.IconLayer({
        width: width,
        height: height,
        offset: [0, -153 / 12],
        opacity: 0.8,
        icon: img4_control,
        enablePicked: true, // 是否可以拾取
        onClick: (e) => {
          if (e.dataItem) {
            let data = e.dataItem.geometry.data;
            that.looklampDetail(data);
            that.pointData = data;
          }
        },
        onRightClick: (e) => {
          if (!e.dataItem) {
            return;
          }
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;

          that.$refs.lampcontrol.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol.style.left = mouseXPosition + "px";
          let data = {
            lat: that.deviceItem.latitude,
            lng: that.deviceItem.longitude,
          };
          that.opencontrolpanel(data, that.deviceItem.deviceId, 1);
        },
        onMousemove: (e) => {
          if (!e.dataItem) {
            that.infoWindow.show = false;
            if (!that.dimmerDialogVisible) {
              that.infoWindowcontrol.show = false;
            }
            return;
          }
          this.rightcheck = "1";
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;
          that.deviceItem = e.dataItem.geometry.data;
          that.$refs.windowinfocontain.style.top = mouseYPosition + "px";
          that.$refs.windowinfocontain.style.left = mouseXPosition + "px";
          let data = e.dataItem.geometry.data;
          if (!that.infoWindow.show && !that.infoWindowcontrol.show) {
            that.throttle(that.showdraw(data.deviceId, 1), 500);
          }
        },
      });
      viewInfo.addLayer(that.layer1);
      that.layer2 = new mapvgl.IconLayer({
        width: width,
        height: height,
        offset: [0, -153 / 12],
        opacity: 0.8,
        icon: img1_control,
        enablePicked: true, // 是否可以拾取
        onClick: (e) => {
          if (e.dataItem) {
            let data = e.dataItem.geometry.data;
            that.looklampDetail(data);
            that.pointData = data;
          }
        },
        onRightClick: (e) => {
          if (!e.dataItem) {
            return;
          }
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;

          that.$refs.lampcontrol2.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol2.style.left = mouseXPosition + "px";
          let data = {
            lat: that.deviceItem.latitude,
            lng: that.deviceItem.longitude,
          };

          that.opencontrolpanel(data, that.deviceItem.deviceId, 2);
        },
        onMousemove: (e) => {
          if (!e.dataItem) {
            that.infoWindow.show2 = false;
            if (!that.dimmerDialogVisible) {
              that.infoWindowcontrol.show2 = false;
            }
            return;
          }
          this.rightcheck = "2";
          that.deviceItem = e.dataItem.geometry.data;
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;
          that.$refs.windowinfocontain2.style.top = mouseYPosition + "px";
          that.$refs.windowinfocontain2.style.left = mouseXPosition + "px";
          let data = e.dataItem.geometry.data;
          if (!that.infoWindow.show2 && !that.infoWindowcontrol.show2) {
            that.throttle(that.showdraw(data.deviceId, 2), 500);
          }
        },
      });
      viewInfo2.addLayer(that.layer2);
      //故障
      that.layer3 = new mapvgl.IconLayer({
        width: width,
        height: height,
        offset: [0, -153 / 12],
        opacity: 0.8,
        icon: img3_control,
        enablePicked: true, // 是否可以拾取
        onClick: (e) => {
          if (e.dataItem) {
            let data = e.dataItem.geometry.data;
            that.looklampDetail(data);
            that.pointData = data;
          }
        },
        onRightClick: (e) => {
          if (!e.dataItem) {
            return;
          }
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;

          that.$refs.lampcontrol3.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol3.style.left = mouseXPosition + "px";
          let data = {
            lat: that.deviceItem.latitude,
            lng: that.deviceItem.longitude,
          };

          that.opencontrolpanel(data, that.deviceItem.deviceId, 3);
        },
        onMousemove: (e) => {
          if (!e.dataItem) {
            that.infoWindow.show3 = false;
            if (!that.dimmerDialogVisible) {
              that.infoWindowcontrol.show3 = false;
            }
            return;
          }
          this.rightcheck = "3";
          that.deviceItem = e.dataItem.geometry.data;
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;
          that.$refs.windowinfocontain3.style.top = mouseYPosition + "px";
          that.$refs.windowinfocontain3.style.left = mouseXPosition + "px";
          let data = e.dataItem.geometry.data;
          if (!that.infoWindow.show3 && !that.infoWindowcontrol.show3) {
            that.throttle(that.showdraw(data.deviceId, 3), 500);
          }
        },
      });
      viewInfo3.addLayer(that.layer3);

      that.layer4 = new mapvgl.IconLayer({
        width: width,
        height: height,
        offset: [0, -153 / 12],
        opacity: 0.8,
        icon: img2_control,
        enablePicked: true, // 是否可以拾取
        onClick: (e) => {
          if (e.dataItem) {
            let data = e.dataItem.geometry.data;
            that.looklampDetail(data);
            that.pointData = data;
          }
        },
        onRightClick: (e) => {
          if (!e.dataItem) {
            return;
          }
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;

          that.$refs.lampcontrol4.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol4.style.left = mouseXPosition + "px";
          let data = {
            lat: that.deviceItem.latitude,
            lng: that.deviceItem.longitude,
          };

          that.opencontrolpanel(data, that.deviceItem.deviceId, 4);
        },
        onMousemove: (e) => {
          if (!e.dataItem) {
            that.infoWindow.show4 = false;
            if (!that.dimmerDialogVisible) {
              that.infoWindowcontrol.show4 = false;
            }
            return;
          }
          this.rightcheck = "4";
          that.deviceItem = e.dataItem.geometry.data;
          let ev = window.event;
          var mouseXPosition = 0;
          var mouseYPosition = 0;
          var mousePos = mousePosition(ev);
          mouseXPosition = mousePos.x + 3;
          mouseYPosition = mousePos.y + 3;
          that.$refs.windowinfocontain4.style.top = mouseYPosition + "px";
          that.$refs.windowinfocontain4.style.left = mouseXPosition + "px";
          let data = e.dataItem.geometry.data;
          if (!that.infoWindow.show4 && !that.infoWindowcontrol.show4) {
            that.throttle(that.showdraw(data.deviceId, 4), 500);
          }
        },
      });
      viewInfo4.addLayer(that.layer4);

      that.textLayer = new mapvgl.TextLayer({
        id: 'textLayer',
        color: '#fff', // 文本颜色
        fontSize: 13, // 字体大小
        padding: [2, 2],
        margin: [0, 0],
        collides:false,
        textAnchor: 'middle', // 文本水平对齐方式
        verticalAlign: 'middle', // 文本垂直对齐方式
        offset: [0, 0],  // 偏移量，确保文本居中
      });
      viewInfo2.addLayer(that.textLayer);

      that.clusterLayer = new mapvgl.CircleLayer({
            // 默认类型，绘制简单圆
            type: 'simple',
            enablePicked: true, // 是否可以拾取
            onClick(e) {
                if (e.dataItem) {
                    let data = e.dataItem.geometry.data;
                    var new_point = new that.BMap.Point(data.longitude, data.latitude);
                    that.map.centerAndZoom(new_point, 15);
                }
            },
            onMousemove: (e) => {
              if (!e.dataItem) {
                that.clusterLayerVisible = false;
                return;
              }
              that.productId = e.dataItem.geometry.data.tenantId;
              let ev = window.event;
              var mouseXPosition = 0;
              var mouseYPosition = 0;
              var mousePos = mousePosition(ev);
              mouseXPosition = mousePos.x + 3;
              mouseYPosition = mousePos.y + 3;
              that.$refs.clusterLayer.style.top = mouseYPosition + "px";
              that.$refs.clusterLayer.style.left = mouseXPosition + "px";
              that.clusterLayerVisible = true;
            },
        });
      viewInfo.addLayer(that.clusterLayer);
    
      map.setDefaultCursor("default");
    },
    syncCenterAndZoom(e) {
      let that = this;
      this.oblamp1 = [];
      this.oblamp2 = [];
      this.oblamp3 = [];
      this.oblamp4 = [];
      this.objdengju1 = [];
      this.objdengju2 = [];
      this.objdengju3 = [];
      this.objdengju4 = [];
      this.objdengju = [];
      this.zoomEnd = 1;
      //清除覆盖物跳动动画
      if (this.map != null) {
        var Center = this.map.getCenter();
        this.center.lng = Center.lng;
        this.center.lat = Center.lat;

        var markers = this.map.getOverlays();
        for (var i = 0; i < markers.length; i++) {
          let className = markers[i].domElement.className;
          if (className.indexOf("mapBG2") != -1) {
            className = className.replace(" mapBG2", "");
            markers[i].domElement.className = className;
            this.map.removeOverlay(markers[i]);
          }
        }
        setTimeout(() => {
          this.getdengji();
        }, 200);
      }
    },
    syncCenterAndZoom1(e) {
      if (this.map != null) {
        let zoom = this.map.getZoom();
        if (zoom === 21) {
          let data = this.pointData;
          setTimeout(() => {
            this.addAnimation(data);
          }, 300);
        }
      }
      setTimeout(() => {
        this.getdengji();
      }, 200);
    },
    getdengji() {
      let zoom = this.map.getZoom();
      var that = this;
      if (that.layer1 || that.layer2 || that.layer3 || that.layer4) {
        that.layer1.clear();
        that.layer2.clear();
        that.layer3.clear();
        that.layer4.clear();
      }
      listAllDeviceShort().then((response) => {
        let allList = [];
        let marker1 = [];
        let marker2 = [];
        let marker3 = [];
        that.cluList = [];
        that.textCluList = [];
        let marker4 = JSON.parse(sessionStorage.getItem("markerData4"))

        function getSequentialHexColor() {
          let r = 30, g = 30, b = 30;
          
          return function() {
              // 递增 RGB 每个通道的值，确保颜色保持深色
              r = (r + 10) % 90 + 30;  // 红色通道递增，取模并保持在30-120之间
              g = (g + 15) % 90 + 30;  // 绿色通道递增，取模并保持在30-120之间
              b = (b + 20) % 90 + 30;  // 蓝色通道递增，取模并保持在30-120之间
              
              // 生成并返回 HEX 颜色
              return `#${(1 << 24 | (r << 16) | (g << 8) | b).toString(16).slice(1).padStart(6, '0')}`;
          };
      }

        const generateColor = getSequentialHexColor();

        if(zoom < 15){
          const map = new Map();
          for(let i in response.rows){
              if(map.has(response.rows[i].tenantId)){
                map.get(response.rows[i].tenantId).push(response.rows[i]);
              }else{
                map.set(response.rows[i].tenantId, [response.rows[i]]);
              }
          }
          allList = Array.from(map.values());
          for(let i in allList){
            let midIndex = Math.floor(allList[i].length / 2);
            let obj = {
              geometry: {
                type: "Point",
                coordinates: [
                  allList[i][midIndex].longitude,
                  allList[i][midIndex].latitude,
                ],
                data: allList[i][midIndex],
              },
              color: generateColor(),
              size:20,
            }
            let obj2 = {
              geometry: {
                type: "Point",
                coordinates: [
                  allList[i][midIndex].longitude,
                  allList[i][midIndex].latitude,
                ],
                data: allList[i][midIndex],
              },
              properties: {
                text:allList[i].length >= 10000 ? Math.round(allList[i].length / 1000) + 'k'
                    : allList[i].length >= 1000 ? Math.round(allList[i].length / 100) / 10 + 'k' : allList[i].length
              }
            }
            that.cluList.push(obj);
            that.textCluList.push(obj2);
          }
        }else{
          for (let i = 0; i < response.rows.length; i++) {
          if (response.rows[i].status == 3) {
            if (marker4.length > 0) {
              let index = marker4.findIndex((item) => {
                return item.geometry.data.deviceId == response.rows[i].deviceId;
              });
              if (index != -1) {
                continue;
              }
            }

            marker1.push({
              geometry: {
                type: "Point",
                coordinates: [
                  response.rows[i].longitude,
                  response.rows[i].latitude,
                ],
                data: response.rows[i],
              },
            });
          } else if (response.rows[i].status == 5) {
            marker3.push({
              geometry: {
                type: "Point",
                coordinates: [
                  response.rows[i].longitude,
                  response.rows[i].latitude,
                ],
                data: response.rows[i],
              },
            });
          } else {
            if (marker4.length > 0) {
              let index = marker4.findIndex((item) => {
                return item.geometry.data.deviceId == response.rows[i].deviceId;
              });
              if (index != -1) {
                marker4.splice(index, 1);
                sessionStorage.setItem("markerData4", JSON.stringify(marker4));
              }
            }

            marker2.push({
              geometry: {
                type: "Point",
                coordinates: [
                  response.rows[i].longitude,
                  response.rows[i].latitude,
                ],
                data: response.rows[i],
              },
            });
          }
        }
        }
        //在线
        that.markerData1 = marker1;
        //离线
        that.markerData2 = marker2;
        that.markerData3 = marker3;
        if (that.checkedLampOptions.indexOf(that.lampOptions[3]) != -1 && zoom >= 15) {
          that.layer1.setData(marker2);
        }

        if (that.checkedLampOptions.indexOf(that.lampOptions[0]) != -1 && zoom >= 15) {
          that.layer2.setData(marker1);
        }
        if (that.checkedLampOptions.indexOf(that.lampOptions[2]) != -1 && zoom >= 15) {
          that.layer3.setData(marker3);
        }

        if (that.checkedLampOptions.indexOf(that.lampOptions[1]) != -1 && zoom >= 15) {
          that.layer4.setData(marker4);
        }
      });
    },
    addAnimation(data) {
      let that = this;
      var markers = this.map.getOverlays();
      for (var i = 0; i < markers.length; i++) {
        let className = markers[i].domElement.className;
        if (className.indexOf("mapBG2") != -1) {
          className = className.replace(" mapBG2", "");
          markers[i].domElement.className = className;
          this.map.removeOverlay(markers[i]);
        }
      }
      var icon = new BMap.Icon(
        "" +
          "AAAFCAYAAACNbyblAAAAHElEQVR42mJ8//8/AwAC/8M9aP5MAAAAABJRU5ErkJggg==",
        new BMap.Size(1, 1)
      );
      var point = new BMap.Point(data.longitude, data.latitude);
      var marker = new BMap.Marker(point, {
        icon: icon,
      });
      function mousePosition(ev) {
        if (ev.pageX || ev.pageY) {
          return { x: ev.pageX, y: ev.pageY };
        }
        return {
          x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
          y: ev.clientY + document.body.scrollTop - document.body.clientTop,
        };
      }
      marker.addEventListener("rightclick", function (e) {
        let ev = window.event;
        var mouseXPosition = 0;
        var mouseYPosition = 0;
        var mousePos = mousePosition(ev);
        mouseXPosition = mousePos.x + 3;
        mouseYPosition = mousePos.y + 3;
        let data = {
          lat: that.deviceItem.latitude,
          lng: that.deviceItem.longitude,
        };
        if (that.rightcheck == "1") {
          that.$refs.lampcontrol.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol.style.left = mouseXPosition + "px";
          that.opencontrolpanel(data, that.deviceItem.deviceId, 1);
        } else if (that.rightcheck == "2") {
          that.$refs.lampcontrol2.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol2.style.left = mouseXPosition + "px";
          that.opencontrolpanel(data, that.deviceItem.deviceId, 2);
        } else if (that.rightcheck == "3") {
          that.$refs.lampcontrol3.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol3.style.left = mouseXPosition + "px";
          that.opencontrolpanel(data, that.deviceItem.deviceId, 3);
        } else {
          that.$refs.lampcontrol4.style.top = mouseYPosition + "px";
          that.$refs.lampcontrol4.style.left = mouseXPosition + "px";
          that.opencontrolpanel(data, that.deviceItem.deviceId, 4);
        }
      });
      this.map.addOverlay(marker);

      // 添加 CSS 类以触发动画
      let className = marker.domElement.className;
      marker.domElement.className = className + " mapBG2";
    },
    gotolampdialog() {
      localStorage.setItem("querymode", "all");
      setTimeout(() => {
        this.Lampdialog1Visible = true;
      }, 16);
      this.AlarmlogdialogVisible = false;
      this.FreezedatadialogVisible = false;
      this.NewalarmdialogVisible = false;
      this.energyanalysisVisible = false;
      this.strategydialogVisible = false;
    },
    alarmlogshow() {
      this.Lampdialog1Visible = false;

      this.AlarmlogdialogVisible = true;
      this.FreezedatadialogVisible = false;
      this.NewalarmdialogVisible = false;
      this.energyanalysisVisible = false;
      this.strategydialogVisible = false;
    },
    freezedatalogshow() {
      this.Lampdialog1Visible = false;
      this.AlarmlogdialogVisible = false;
      this.FreezedatadialogVisible = true;
      this.NewalarmdialogVisible = false;
      this.energyanalysisVisible = false;
      this.strategydialogVisible = false;
    },
    energyanalysis(){
      this.Lampdialog1Visible = false;
      this.AlarmlogdialogVisible = false;
      this.FreezedatadialogVisible = false;
      this.NewalarmdialogVisible = false;
      this.energyanalysisVisible = true;
      this.strategydialogVisible = false;
    },
    strategyshow(){
      this.Lampdialog1Visible = false;
      this.AlarmlogdialogVisible = false;
      this.FreezedatadialogVisible = false;
      this.NewalarmdialogVisible = false;
      this.energyanalysisVisible = false;
      this.strategydialogVisible = true;
    },
    alarmshow() {
      localStorage.setItem("querymode", "all");
      this.Lampdialog1Visible = false;
      
      this.AlarmlogdialogVisible = false;
      this.FreezedatadialogVisible = false;
      this.NewalarmdialogVisible = true;
      this.energyanalysisVisible = false;
      this.strategydialogVisible = false;
    },
    opencontrolpanel(data, id, index) {
      this.infoWindow.show = false;
      this.infoWindow.show2 = false;
      this.infoWindow.show3 = false;
      this.infoWindow.show4 = false;
      this.infoWindowcontrol.show = false;
      this.infoWindowcontrol.info.lng = data.lng;
      this.infoWindowcontrol.info.lat = data.lat;
      this.infoWindowcontrol.info.serialNumber = this.infoWindow.info.comid;
      this.infoWindowcontrol.info.name = this.infoWindow.info.name;
      if (index == 1) {
        this.infoWindowcontrol.show = true;
      } else if (index == 2) {
        this.infoWindowcontrol.show2 = true;
      } else if (index == 3) {
        this.infoWindowcontrol.show3 = true;
      } else {
        this.infoWindowcontrol.show4 = true;
      }
      this.infoWindowcontrol.info.isShadow = this.infoWindow.info.isShadow;
      this.infoWindowcontrol.info.status = this.infoWindow.info.status2;
      if (id !== "") {
        this.getDeviceStatus({ deviceId: id });
      }
    },
    async connectMqtt() {
      if (this.$mqttTool.client == null) {
        await this.$mqttTool.connect(this.vuex_token);
      }
      this.mqttCallback();
    },
    getDevice(deviceId) {
      getDevice(deviceId).then(async (response) => {
        // 分享设备获取用户权限
        response.data.userPerms = [];
        if (response.data.isOwner == 0) {
          getDeviceUser(deviceId, this.$store.state.user.userId).then(
            (permResponse) => {
              response.data.userPerms = permResponse.data.perms.split(",");
              // 获取设备状态和物模型
              this.getDeviceStatusWitchThingsModel(response);
            }
          );
        } else {
          // 获取设备状态和物模型
          this.getDeviceStatusWitchThingsModel(response);
        }
      });
    },
    /* Mqtt回调处理  */
    mqttCallback() {
      let that = this;
      this.$mqttTool.client.on("message", (topic, message, buffer) => {
        let topics = topic.split("/");
        let productId = topics[1];
        let deviceNum = topics[2];
        message = JSON.parse(message.toString());
        if (!message) {
          return;
        }
        if (message.message) {
          message = message.message;
        } else {
          message = message;
        }
        if (topics[3] == "status" || topics[2] == "status") {
          console.log("接收到【设备状态-详情】主题：", topic);
          console.log("接收到【设备状态-详情】内容：", message);
          let marker4 = JSON.parse(sessionStorage.getItem("markerData4"));
          if (message.status == 3) {
            if (marker4.length > 0) {
              let index = that.markerData2.findIndex((item) => {
                return item.geometry.data.serialNumber == deviceNum;
              });
              if (index !== -1) {
                that.markerData1.push(that.markerData2[index]);
                that.markerData2.splice(index, 1);
                that.layer1.setData(that.markerData2);
                that.layer2.setData(that.markerData1);
              }
            }
          } else if (message.status == 4) {
            let index = that.markerData1.findIndex((item) => {
              return item.geometry.data.serialNumber == deviceNum;
            });

            let index2 = marker4.findIndex((item) => {
              return item.geometry.data.serialNumber == deviceNum;
            });

            if (index !== -1) {
              that.markerData2.push(that.markerData1[index]);
              that.markerData1.splice(index, 1);
              that.layer1.setData(that.markerData2);
              that.layer2.setData(that.markerData1);
            }

            if (index2 !== -1) {
              that.markerData2.push(marker4[index2]);
              marker4.splice(index2, 1);
              sessionStorage.setItem("markerData4", JSON.stringify(marker4));
              that.layer1.setData(that.markerData2);
              that.layer4.setData(marker4);
            }
          }
          // 更新列表中设备的状态
        }
        if (topic.endsWith("ws/service")) {
          let value1 = "";
          let value2 = "";
          if (message && message.length > 0) {
            for (let i in message) {
              if (message[i].id == "DRA_Dim") {
                value1 = message[i].value;
              }
              if (message[i].id == "DRA_Color") {
                value2 = message[i].value;
              }
            }
            if (
              that.deviceNumber == deviceNum &&
              message[0].id.split("_")[0] == that.modelType
            ) {
              for (let i in message) {
                that.readObject[message[i].id] = message[i].value;
              }
              this.deviceNumber = null;
            }
          }
          let marker4 = JSON.parse(sessionStorage.getItem("markerData4"));
          if (Number(value1) == 0 && Number(value2) == 0) {
            let index = that.markerData1.findIndex((item) => {
              return item.geometry.data.serialNumber == deviceNum;
            });
            if (index !== -1) {
              marker4.push(that.markerData1[index]);
              that.markerData1.splice(index, 1);
              that.layer4.setData(marker4);
              that.layer2.setData(that.markerData1);
              sessionStorage.setItem("markerData4", JSON.stringify(marker4));
            }
          } else {
            let index = marker4.findIndex((item) => {
              return item.geometry.data.serialNumber == deviceNum;
            });
            if (index !== -1) {
              that.markerData1.push(marker4[index]);
              marker4.splice(index, 1);
              that.layer4.setData(marker4);
              that.layer2.setData(that.markerData1);
              sessionStorage.setItem("markerData4", JSON.stringify(marker4));
            }
          }

          console.log("接收到【物模型】主题1：", topic);
          console.log("接收到【物模型】内容：", message);
          // 更新列表中设备的属性
        }
      });
    },
    /** 获取设备状态和物模型 **/
    async getDeviceStatusWitchThingsModel(response) {
      // 获取缓存物模型
      response.data.cacheThingsModel = await this.getCacheThingsModdel(
        response.data.productId
      );
      // 获取设备运行状态
      response.data.thingsModels = await this.getDeviceStatus(response.data);
      //分享设备过滤没有权限的物模型
      if (response.data.isOwner == 0) {
        for (let i = 0; i < response.data.thingsModels.length; i++) {
          if (
            response.data.userPerms.indexOf(response.data.thingsModels[i].id) ==
            -1
          ) {
            response.data.thingsModels.splice(i--, 1);
          }
        }
      }
      this.isSubDev =
        this.deviceList.subDeviceList &&
        this.deviceList.subDeviceList.length > 0;
      this.oldDeviceStatus = this.deviceList.status;
      // 格式化物模型，拆分出监测值,数组添加前缀
      this.deviceList = response.data;
      //Mqtt订阅
      this.connectMqtt();
      this.mqttSubscribe(this.deviceList);
    },
    mqttSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus =
        "/" + device.productId + "/" + device.serialNumber + "/status/post";
      let topicProperty =
        "/" + device.productId + "/" + device.serialNumber + "/property/post";
      let topics = [];
      let serviceTop =
        "/" + device.productId + "/" + device.serialNumber + "/ws/service";
      topics.push(serviceTop);

      topics.push(topicStatus);
      /*modbus设备不订阅此topic*/
      if (!this.isSubDev) {
        // topics.push(topicProperty);
      }
      this.$mqttTool.subscribe(topics);
    },
    /** Mqtt取消订阅主题 */
    mqttUnSubscribe(device) {
      // 订阅当前设备状态和实时监测
      let topicStatus =
        "/" + device.productId + "/" + device.serialNumber + "/status/post";
      let topicProperty =
        "/" + device.productId + "/" + device.serialNumber + "/property/post";
      let topics = [];
      let serviceTop =
        "/" + device.productId + "/" + device.serialNumber + "/ws/service";
      topics.push(serviceTop);

      topics.push(topicStatus);
      /*modbus设备不订阅此topic*/
      if (!this.isSubDev) {
        /*通过网关再转发*/
        // topics.push(topicProperty);
      }
      this.$mqttTool.unsubscribe(topics);
    },
    /** 获取缓存物模型*/
    getCacheThingsModdel(productId) {
      return new Promise((resolve, reject) => {
        cacheJsonThingsModel(productId)
          .then((response) => {
            resolve(JSON.parse(response.data));
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    /**获取设备运行状态*/
    getDeviceStatus(data) {
      let that = this;
      const params = {
        deviceId: data.deviceId,
        slaveId: data.slaveId,
      };
      return new Promise((resolve, reject) => {
        getDeviceRunningStatus(params)
          .then((response) => {
            that.deviceListInfo = response.data.thingsModels;
            that.deviceInfo = response.data;
            that.infoWindowcontrol.info.id = response.data.productId;
            resolve(response.data.thingsModels);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    looklampDetail(data, index) {
      this.infoWindow.show = false;
      this.infoWindow.show2 = false;
      this.infoWindow.info.lamptitle1 = this.infoWindow.info.title1;

      this.center.lng = data.longitude;
      this.center.lat = data.latitude;
      this.mapcenter.lng = data.longitude;
      this.mapcenter.lat = data.latitude;
      if (this.center.lng != "" && this.center.lat != "") {
        var lan = Number(this.center.lng);
        var lat = Number(this.center.lat);

        var new_point = new this.BMap.Point(lan, lat);

        this.map.centerAndZoom(new_point, 21);
        this.zoom = 21;
        this.zoomEnd = 0;
        setTimeout(() => {
          this.addAnimation(this.pointData);
        }, 1500);
      }
    },
    infoWindowClose(e) {
      this.infoWindow.show = false;
    },
    infoWindowOpen(e) {
      this.infoWindow.show = true;
    },
    infoWindowcontrolClose(e) {
      this.infoWindowcontrol.show = false;
    },
    infoWindowcontrolOpen(e) {
      this.infoWindowcontrol.show = true;
    },
    showdraw(id, index) {
      let data = null;
      let that = this;
      getDeviceDetail({ deviceId: id }).then((response) => {
        data = response.data;
        if (index == 1) {
          that.infoWindow.show = true;
        } else if (index == 2) {
          that.infoWindow.show2 = true;
        } else if (index == 3) {
          that.infoWindow.show3 = true;
        } else {
          that.infoWindow.show4 = true;
        }
        that.infoWindow.info.title = data.title;
        if (sessionStorage.lang == "zh-cn") {
          that.infoWindow.info.title1 = data.title;
          //that.infoWindow.info.lamptitle1=data.title;
        } else {
          that.infoWindow.info.title1 = "Basic information of Lamp";
          //that.infoWindow.info.lamptitle1='Basic information of Lamp';
        }

        that.infoWindow.info.name = data.deviceName;
        that.infoWindow.info.comid = data.serialNumber;
        that.infoWindow.info.deviceId = data.deviceId;
        if (data.status == 1) {
          that.infoWindow.info.status = that.$t("menu.notactive");
        } else if (data.status == 2) {
          that.infoWindow.info.status = that.$t("menu.interdict");
        } else if (data.status == 3) {
          that.infoWindow.info.status = that.$t("menu.online");
        } else if (data.status == 4) {
          that.infoWindow.info.status = that.$t("menu.offline");
        }
        if (data.isShadow == 1) {
          that.infoWindow.info.isShadow = that.$t("menu.enable");
        } else {
          if (sessionStorage.lang == "zh-cn") {
            that.infoWindow.info.isShadow = "未启用";
          } else {
            that.infoWindow.info.isShadow = "Disabled";
          }
        }

        that.infoWindow.info.productName = data.productName;

        that.infoWindow.info.firmwareVersion = data.firmwareVersion;
        that.infoWindow.info.activeTime = data.activeTime;
        if (data.locationWay == 1) {
          that.infoWindow.info.locationWay = that.$t(
            "title.tunnellightingsystem_systemmanagement_title_automaticpositioning"
          );
        } else if (data.locationWay == 2) {
          that.infoWindow.info.locationWay = that.$t(
            "title.tunnellightingsystem_systemmanagement_title_devicepositioning"
          );
        } else if (data.locationWay == 3) {
          that.infoWindow.info.locationWay = that.$t(
            "title.tunnellightingsystem_systemmanagement_title_customlocation"
          );
        } else {
          that.infoWindow.info.locationWay = that.$t(
            "title.tunnellightingsystem_systemmanagement_title_unknown"
          );
        }
        that.infoWindow.info.networkAddress = data.networkAddress;
        that.infoWindow.info.latitude = data.latitude;
        that.infoWindow.info.longitude = data.longitude;
        that.infoWindow.info.isShadow = data.isShadow;
        that.infoWindow.info.status2 = data.status;
        that.infoWindow.info.productId = data.productId;
        this.infoWindow.info.tenantId = data.tenantId;
        this.infoWindow.info.groupOrder = data.groupOrder;
        that.infoWindow.info.image = that.$t(
          "label.roadlampsystem_frontpage_label_polephoto"
        );
      });
    },
    zoomin(e) {
      if (this.map.getCenter().lng != "" && this.map.getCenter().lat != "") {
        var new_point = new this.BMap.Point(
          this.map.getCenter().lng,
          this.map.getCenter().lat
        );
        this.zoom++;
        if (this.zoom >= 20) this.zoom = 21;

        this.map.centerAndZoom(new_point, this.zoom);
      }
    },
    zoomsmall(e) {
      if (this.map.getCenter().lng != "" && this.map.getCenter().lat != "") {
        var new_point = new this.BMap.Point(
          this.map.getCenter().lng,
          this.map.getCenter().lat
        );
        if (this.zoom > 0) this.zoom--;

        this.map.centerAndZoom(new_point, this.zoom);
      }
    },
    getfocus(event) {
      if (this.panestate == "0") {
        this.QuickquerydialogVisible = true;
      } else {
        this.QuickquerydialogVisible = false;
      }
    },
    querychange(e) {
      if (this.search == "" || this.search == null) {
        this.queryData = [];
        if (this.panestate == "0") {
          this.QuerydialogVisible1 = false;
          this.QuickquerydialogVisible = false;
        } else {
          this.QuerydialogVisible = false;
          this.QuerydialogVisible1 = false;
        }
      }
    },
    querydevice(devicename) {},
    filter() {},
    query() {
      if (this.search != "") {
        let queuryParams = {
          pageNum: this.currentPage,
          pageSize: this.perpage,
          deviceName: this.search,
          showChild: true,
        };
        listDeviceShort(queuryParams).then((res) => {
          this.queryData = res.rows;
          if (this.panestate == "0") {
            this.QuerydialogVisible1 = true;
          } else {
            this.QuerydialogVisible = true;
          }
          this.total = res.total;
        });
      }
    },
    reset(e) {
      if (sessionStorage.longitude == null || sessionStorage.longitude == "") {
        sessionStorage.longitude = this.mapcenter.lng;
        sessionStorage.latitude = this.mapcenter.lat;
      }

      if (sessionStorage.longitude != "" && sessionStorage.latitude != "") {
        var new_point = new this.BMap.Point(
          Number(sessionStorage.longitude),
          Number(sessionStorage.latitude)
        );

        this.map.centerAndZoom(this.zoomCenter, 10);
        this.zoom = 3;
      }
    },
    setcenter(e) {},
    lampalarmrefresh(msg) {
      debugger;
      this.$refs.device_lamp.refreshdata(1);
      debugger;
      this.$refs.device_loop.refreshdata(1);
    },
    openalarmlog(msg) {
      this.AlarmlogdialogVisible = true;
    },
    alarmdevicelocation(msg) {
      this.center.lng = msg.longitude;
      this.center.lat = msg.latitude;
      if (this.center.lng != "" && this.center.lat != "") {
        var new_point = new this.BMap.Point(
          Number(this.center.lng),
          Number(this.center.lat)
        );

        this.map.centerAndZoom(new_point, 21);
        this.syncCenterAndZoom();
        var markers = that.map.getOverlays();
        for (var i = 0; i < markers.length; i++) {
          if (markers[i].toString() == "[object Marker]") {
            if (
              markers[i].getPosition().lng == msg.longitude &&
              markers[i].getPosition().lat == msg.latitude &&
              markers[i].isInCluster
            ) {
              let className = markers[i].V.className;
              if (className.indexOf("mapBG2") != -1) {
                className = className.replace(" mapBG2", "");
                markers[i].V.className = className;
              } else {
                markers[i].V.className = markers[i].V.className + " mapBG2";
              }
            }
          }
        }

        this.zoom = 21;
      }
    },
    rtulocation(msg) {
      debugger;
      this.center.lng = msg.longitude;
      this.center.lat = msg.latitude;
      if (this.center.lng != "" && this.center.lat != "") {
        var new_point = new this.BMap.Point(
          Number(this.center.lng) - 0.0034,
          Number(this.center.lat)
        );

        this.map.centerAndZoom(new_point, 21);
        this.syncCenterAndZoom();
        var time;
        var that = this;
        var markposition = { lng: "", lat: "" };
        markposition.lng = msg.longitude;
        markposition.lat = msg.latitude;
        //创建定时器
        clearTimeout(time);
        time = setTimeout(function () {
          var markers = that.map.getOverlays();
          for (var i = 0; i < markers.length; i++) {
            if (markers[i].toString() == "[object Marker]") {
              if (
                markers[i].getPosition().lng == msg.longitude &&
                markers[i].getPosition().lat == msg.latitude &&
                markers[i].isInCluster
              ) {
                let className = markers[i].V.className;
                if (className.indexOf("mapBG2") != -1) {
                  className = className.replace(" mapBG2", "");
                  markers[i].V.className = className;
                } else {
                  markers[i].V.className = markers[i].V.className + " mapBG2";
                }
              }
            }
          }
        }, 300);

        this.zoom = 21;
      }
    },
    lamplocation(msg) {
      this.zoomEnd = 1;
      var that = this;
      this.center.lng = msg.longitude;
      this.center.lat = msg.latitude;
      if (this.center.lng != "" && this.center.lat != "") {
        var new_point = new this.BMap.Point(
          Number(this.center.lng),
          Number(this.center.lat)
        );

        this.map.centerAndZoom(new_point, 21);
        setTimeout(() => {
          this.zoomEnd = 0;
        }, 300);

        this.pointData = msg;
        this.zoom = 21;
      }
    },
    getalarminfo(msg) {
      this.NewalarmdialogVisible = true;
      localStorage.setItem("querymode", "single");
      this.$nextTick(function () {
        // DOM 现在更新了
        Event.$emit("alarm", msg);
      });
    },
    fromgateway(msg) {
      if (msg == "lampmaxshow") {
        this.LampdialogmaxVisible = true;
      } else if (msg == "lampmaxclose") {
        this.LampdialogmaxVisible = false;
      }
    },
    lampmange(msg) {},
    handleCheckAllChange2(val) {
      let that = this;
      this.checkedLampOptions = val ? this.lampOptions : [];
      this.isIndeterminate2 = false;
      if (this.checkedLampOptions.indexOf(this.lampOptions[0]) != -1) {
        that.layer2.setData(that.markerData1);
      } else {
        that.layer2.clear();
      }
      if (this.checkedLampOptions.indexOf(this.lampOptions[3]) != -1) {
        that.layer1.setData(that.markerData2);
      } else {
        that.layer1.clear();
      }
      if (this.checkedLampOptions.indexOf(this.lampOptions[2]) != -1) {
        that.layer3.setData(that.markerData3);
      } else {
        this.layer3.clear();
      }
      if (this.checkedLampOptions.indexOf(this.lampOptions[1]) != -1) {
        let marker4 = JSON.parse(sessionStorage.getItem("markerData4"));
        that.layer4.setData(marker4);
      } else {
        that.layer4.clear();
      }
    },
    handleCheckedLampsChange(value) {
      let that = this;
      this.checkedLampOptions = value;
      let checkedCount = value.length;
      if (this.checkedLampOptions.indexOf(this.lampOptions[0]) != -1) {
        that.layer2.setData(that.markerData1);
      } else {
        that.layer2.clear();
      }
      if (this.checkedLampOptions.indexOf(this.lampOptions[3]) != -1) {
        that.layer1.setData(that.markerData2);
      } else {
        that.layer1.clear();
      }
      if (this.checkedLampOptions.indexOf(this.lampOptions[2]) != -1) {
        that.layer3.setData(that.markerData3);
      } else {
        this.layer3.clear();
      }
      if (this.checkedLampOptions.indexOf(this.lampOptions[1]) != -1) {
        that.layer4.setData(that.markerData4);
      } else {
        that.layer4.clear();
      }
      this.checkAll2 = checkedCount === this.lamps.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.lamps.length;
    },
    newalarmmousedown(event) {
      this.selectElement = document.getElementById("newalarmdialog");
      var div1 = this.selectElement;
      //var div1 = event.path[2]
      div1.style.cursor = "move";
      var distanceX = event.clientX - div1.offsetLeft;
      var distanceY = event.clientY - div1.offsetTop;

      document.onmousemove = function (ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    },
    alarmlogmousedown(event) {
      this.selectElement = document.getElementById("alarmlogdialog");
      var div1 = this.selectElement;
      //var div1 = event.path[2]
      div1.style.cursor = "move";
      var distanceX = event.clientX - div1.offsetLeft;
      var distanceY = event.clientY - div1.offsetTop;

      document.onmousemove = function (ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    },
    freezedatamousedown(event) {
      this.selectElement = document.getElementById("freezedatadialog");
      var div1 = this.selectElement;
      //var div1 = event.path[2]
      div1.style.cursor = "move";
      var distanceX = event.clientX - div1.offsetLeft;
      var distanceY = event.clientY - div1.offsetTop;

      document.onmousemove = function (ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    },
    lampmousedown(event) {
      this.selectElement = document.getElementById("lampdialog");
      var div1 = this.selectElement;
      //var div1 = event.path[2]
      div1.style.cursor = "move";
      var distanceX = event.clientX - div1.offsetLeft;
      var distanceY = event.clientY - div1.offsetTop;

      document.onmousemove = function (ev) {
        var oevent = ev || event;
        div1.style.left = oevent.clientX - distanceX + "px";
        div1.style.top = oevent.clientY - distanceY + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        div1.style.cursor = "default";
      };
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    refreshdata() {},
    addClass({ row, rowIndex }) {
      if (row.project != null) {
        return "rtucss";
      } else if (row.lampid != null) {
        return "lampcss";
      } else if (row.master != null) {
        return "sensorcss";
      } else return "loopcss";
    },
    mqttPublish(params) {
      let text2;
      if (sessionStorage.lang == "zh-cn") {
        text2 = "服务调用成功!";
      } else {
        text2 = "Service call successful!";
      }
      if (params.type == 2) {
       broadcastMultiInvoke(params).then((res)=>{
        if (res.code == 200) {
            this.$message({
              type: "success",
              message: text2,
            });
          }
       })
      } else {
        return;
      }
    },
    beginMonitor(params) {
      let list = this.deviceListInfo;
      var group = this.infoWindow.info.groupOrder;
      if (!group) {
        let text = "";
        if (sessionStorage.lang == "zh-cn") {
          text = "设备组号为空，下发指令失败";
        } else {
          text =
            "The device group number is empty, the instruction cannot be issued";
        }
        this.$message({
          type: "error",
          message: text,
        });
        return;
      }
      params.groupOrder = group;
      params.userId = this.infoWindow.info.tenantId
      this.mqttPublish(params);
    },
    readlampstate(row) {
      let that = this;
      let isShadow = row.isShadow != 0 && row.status != 3;
      this.modelType = "DRA";
      let text1, text2, text3;
      if (sessionStorage.lang == "zh-cn") {
        text1 = "设备运行属性";
        text2 = "设备超时未回复!";
        text3 = "设备不在线，无法操作！";
      } else {
        text1 = "Device running attribute";
        text2 = "Device timed out without reply!";
        text3 = "The device is not online and cannot be operated!!";
      }
      if (row.status == 3) {
        let list = this.deviceListInfo;
        let dataList = [];
        for (let i in list) {
          if (list[i].id === "DRA") {
            let params = list[i].datatype.params;
            params.forEach((res) => {
              dataList.push({
                id: res.id,
                value: "",
                remark: "",
              });
            });
          }
        }
        let data = {
          identifier: "DRA",
          isShadow: isShadow,
          modelName: text1,
          productId: row.id,
          remoteCommand: dataList,
          serialNumber: row.serialNumber,
          type: 1,
        };
        readMultiInvoke(data).then((res) => {
          if (res.code == 200) {
            this.loading = true;
            this.deviceNumber = row.serialNumber;
            that.interval = setInterval(() => {
              let isEmpty = Object.keys(that.readObject).length === 0;
              if (!isEmpty) {
                that.loading = false;
                that.deviceNameInfo = row;
                that.stateRead = true;
                clearInterval(that.interval);
                clearTimeout(that.interval2);
              }
            }, 1000);
            that.interval2 = setTimeout(() => {
              clearInterval(that.interval);
              that.loading = false;
              that.$message({
                type: "error",
                message: text2,
              });
            }, 20000);
          }
        });
      } else {
        this.$message({
          type: "error",
          message: text3,
        });
      }
    },
    handleClose() {
      this.stateRead = false;
      this.readObject = {};
      this.modelType = "";
    },
    handleClose2() {
      this.parameterRead = false;
      this.readObject = {};
      this.modelType = "";
    },
    readlampstrategy(row) {
      let isShadow = row.isShadow != 0 && row.status != 3;
      this.modelType = "DOSTT";
      if (row.status == 3 || row.isShadow == 1) {
        let list = this.deviceListInfo;
        let dataList = [];
        for (let i in list) {
          if (list[i].id === "DOSTT") {
            let params = list[i].datatype.arrayParams;
            params.forEach((res, k) => {
              let index = k > 9 ? String(k) : "0" + k;
              let prefix = "array_" + index + "_";
              res.forEach((obj) => {
                dataList.push({
                  id: prefix + obj.id,
                  value: "",
                  remark: "",
                });
              });
            });
          }
        }
        let text1, text2, text3;
        if (sessionStorage.lang == "zh-cn") {
          text1 = "设备运行属性";
          text2 = "服务调用成功!";
          text3 = "设备不在线，且未开启影子模式，无法设置属性!";
        } else {
          text1 = "Device running attribute";
          text2 = "Service call successful!";
          text3 =
            "The device is not online and the shadow mode is not enabled, and the attribute cannot be set!";
        }
        let data = {
          identifier: "DOSTT",
          isShadow: isShadow,
          modelName: text1,
          productId: row.id,
          remoteCommand: dataList,
          serialNumber: row.serialNumber,
          type: 1,
        };
        readMultiInvoke(data).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: text2,
            });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: text3,
        });
      }
    },
    readParameterstate(row) {
      let that = this;
      let isShadow = row.isShadow != 0 && row.status != 3;
      this.modelType = "DBA";
      if (row.status == 3 || row.isShadow == 1) {
        let list = this.deviceListInfo;
        let dataList = [];
        for (let i in list) {
          if (list[i].id === "DBA") {
            let params = list[i].datatype.params;
            params.forEach((res) => {
              dataList.push({
                id: res.id,
                value: "",
                remark: "",
              });
            });
          }
        }
        let text1, text2, text3;
        if (sessionStorage.lang == "zh-cn") {
          text1 = "设备运行属性";
          text2 = "设备超时未回复!";
          text3 = "设备不在线，且未开启影子模式，无法设置属性!";
        } else {
          text1 = "Device running attribute";
          text2 = "Device timeout without response!";
          text3 =
            "The device is not online and the shadow mode is not enabled, and the attribute cannot be set!";
        }
        let data = {
          identifier: "DBA",
          isShadow: isShadow,
          modelName: text1,
          productId: row.id,
          remoteCommand: dataList,
          serialNumber: row.serialNumber,
          type: 1,
        };
        readMultiInvoke(data).then((res) => {
          if (res.code == 200) {
            this.loading = true;
            this.deviceNumber = row.serialNumber;
            that.interval = setInterval(() => {
              let isEmpty = Object.keys(that.readObject).length === 0;
              if (!isEmpty) {
                that.loading = false;
                that.parameterRead = true;
                clearInterval(that.interval);
                clearTimeout(that.interval2);
              }
            }, 1000);
            that.interval2 = setTimeout(() => {
              that.loading = false;
              clearInterval(that.interval);
              that.$message({
                type: "error",
                message: text2,
              });
            }, 20000);
          }
        });
      } else {
        this.$message({
          type: "error",
          message: text3,
        });
      }
    },
    leave1() {
      var that = this;
      that.setTimeoutDropmenu = setTimeout(() => {
        clearInterval(that.setTimeoutDropmenu);
        that.setTimeoutDropmenu = null;
        that.dimmerDialogVisible = false;
      }, 50);
    },
    leave() {
      var that = this;
      that.setTimeoutDropmenu = setTimeout(() => {
        clearInterval(that.setTimeoutDropmenu);
        that.setTimeoutDropmenu = null;
        that.dimmerDialogVisible = false;
      }, 2000);
    },
    hover1() {
      if (this.setTimeoutDropmenu != null) {
        clearInterval(this.setTimeoutDropmenu);
        this.setTimeoutDropmenu = null;
      }
    },
    scenehover() {
      var X = $(".dimmer").offset().top;
      var Y = $(".dimmer").offset().left;
      X = X - 15;
      Y = Y + 138;
      $(".dimmervalue").css("top", X);
      $(".dimmervalue").css("left", Y);
      this.dimmerDialogVisible = false;
      if (this.setTimeoutDropmenu != null) {
        clearInterval(this.setTimeoutDropmenu);
        this.setTimeoutDropmenu = null;
      }
    },
    hover(index) {
      var X,
        Y = 0;
      if (index == 1) {
        X = $(".dimmer3").offset().top;
        Y = $(".dimmer3").offset().left;
      } else if (index == 2) {
        X = $(".dimmer5").offset().top;
        Y = $(".dimmer5").offset().left;
      } else if (index == 3) {
        X = $(".dimmer7").offset().top;
        Y = $(".dimmer7").offset().left;
      } else {
        X = $(".dimmer1").offset().top;
        Y = $(".dimmer1").offset().left;
      }

      X = X - 16;
      Y = Y + 118;
      $(".dimmervalue").css("top", X);
      $(".dimmervalue").css("left", Y);
      this.dimmerDialogVisible = true;
      this.dimmerColor = "dimmer";
      if (this.setTimeoutDropmenu != null) {
        clearInterval(this.setTimeoutDropmenu);
        this.setTimeoutDropmenu = null;
      }
    },
    hover2(index) {
      var X,
        Y = 0;
      if (index == 1) {
        X = $(".dimmer4").offset().top;
        Y = $(".dimmer4").offset().left;
      } else if (index == 2) {
        X = $(".dimmer6").offset().top;
        Y = $(".dimmer6").offset().left;
      } else if (index == 3) {
        X = $(".dimmer8").offset().top;
        Y = $(".dimmer8").offset().left;
      } else {
        X = $(".dimmer2").offset().top;
        Y = $(".dimmer2").offset().left;
      }
      X = X - 16;
      Y = Y + 118;
      $(".dimmervalue").css("top", X);
      $(".dimmervalue").css("left", Y);
      this.dimmerDialogVisible = true;
      this.dimmerColor = "color";
      if (this.setTimeoutDropmenu != null) {
        clearInterval(this.setTimeoutDropmenu);
        this.setTimeoutDropmenu = null;
      }
    },
    resumelamp(row, device) {
      let isShadow = row.isShadow != 0 && row.status != 3;
      
      let data = {}
      if (this.readlampenable){
        data = {
          identifier: "DBIZ_Hand",
          isShadow: isShadow,
          modelName: "切换手自动状态",
          productId: row.id,
          remoteCommand: [{ id: "DBIZ_Hand", value: "0", remark: "" },],
          serialNumber: row.serialNumber,
          type: 2,
        };
      }else{
        data = {
          identifier: "DBIZ_Hand",
          isShadow: isShadow,
          modelName: "切换手自动状态",
          productId: row.id,
          remoteCommand: { "DBIZ_Hand": "0" },
          serialNumber: row.serialNumber,
          type: 2,
        };
      }
      if (row.status == 3) {
        if (this.readlampenable) {
          this.beginMonitor(data);
        } else {
          serviceInvoke(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "服务调用成功!",
              });
            }
          });
        }
      } else {
        this.$message({
          type: "error",
          message: text3,
        });
      }
    },
    dimmerlamp(row, dimmervalue, type) {
      let isShadow = row.isShadow != 0 && row.status != 3;
      let data = {};
      let data2 = [];
      let remoteCommand = [];
      let identifier = null;
      let modelName = null;
      let text1, text2, text3;
      if (sessionStorage.lang == "zh-cn") {
        text1 = "灯控器业务功能";
        text2 = "服务调用成功!";
        text3 = "设备不在线，无法操作！";
      } else {
        text1 = "Business functions of light controller";
        text2 = "Service call successful!";
        text3 = "The device is not online and cannot be operated!";
      }
      if (type) {
        remoteCommand = [
          { id: "DBIZ_Color", value: dimmervalue, remark: "" },
          { id: "DBIZ_Dim", value: dimmervalue, remark: "" },
        ];
        identifier = "DBIZ";
        modelName = text1;
        data2 = [
          { id: "DBIZ_Color", remark: "", value: dimmervalue },
          { id: "DBIZ_Dim", remark: "", value: dimmervalue },
        ];
      } else {
        if (this.dimmerColor === "color") {
          if (this.readlampenable){
            remoteCommand = [{ id: "DBIZ_Color", remark: "", value: dimmervalue }];
          }else{
            remoteCommand = { "DBIZ_Color": dimmervalue };
          }
          identifier = "DBIZ_Color";
          modelName = this.$t(
            "title.tunnellightingsystem_statisticanalysis_title_colortemperaturevalue"
          );
          data2 = [{ id: "DBIZ_Color", remark: "", value: dimmervalue }];
        } else {
          if (this.readlampenable){
            remoteCommand = [{ id: "DBIZ_Dim", remark: "", value: dimmervalue }];
          }else{
            remoteCommand = { "DBIZ_Dim": dimmervalue };
          }
          identifier = "DBIZ_Dim";
          modelName = this.$t(
            "title.tunnellightingsystem_statisticanalysis_title_dimmingvalue"
          );
          data2 = [{ id: "DBIZ_Dim", remark: "", value: dimmervalue }];
        }
      }
      if (this.dimmerColor === "color") {
        data = {
          identifier: identifier,
          isShadow: isShadow,
          modelName: modelName,
          productId: row.id,
          remoteCommand: remoteCommand,
          serialNumber: row.serialNumber,
          type: 2,
        };
      } else {
        data = {
          identifier: identifier,
          isShadow: isShadow,
          modelName: modelName,
          productId: row.id,
          remoteCommand: remoteCommand,
          serialNumber: row.serialNumber,
          type: 2,
        };
      }
      if (row.status == 3) {
        if (this.readlampenable) {
          this.beginMonitor(data);
        } else {
          if (type) {
            serviceMultiInvoke(data).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: text2,
                });
              }
            });
          } else {
            serviceInvoke(data).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: text2,
                });
              }
            });
          }
        }
      } else {
        this.$message({
          type: "error",
          message: text3,
        });
      }
    },
    throttle(func, wait) {
      let timeout = null;
      return function (...args) {
        if (!timeout) {
          timeout = setTimeout(() => {
            func.apply(this, args);
            timeout = null;
          }, wait);
        }
      };
    },
    clicknav(parm, item) {
      switch (parm) {
        case "2-2": //灯杆安装修改删除管理
          {
            this.Lampdialog1Visible = false;
            this.gotolampdialog();
            this.productId = item.id;
            this.productName = item.name;
          }
          break;

        case "3-2": //报警日志
          {
            this.alarmlogshow();
          }
          break;
        case "3-3": //巡测数据
          {
            this.freezedatalogshow();
          }
          break;
        case "3-4": //能耗分析
          {
            this.energyanalysis();
          }
          break;
        case "5-1": //能耗分析
          {
            this.strategyshow();
          }
          break;
        default:
          break;
      }
    },
    histTypeUpdate(radio_lamp) {
      if (sessionStorage.lang == "zh-cn") {
        if (radio_lamp == "单个") {
          this.readlampenable = false;
          this.lampcontrolOffset = { width: 90, height: 280 };
        } else if (radio_lamp == "区域") {
          this.readlampenable = true;
          this.lampcontrolOffset = { width: 90, height: 220 };
        } else if (radio_lamp == "All") {
          this.readlampenable = true;
        }
      } else {
        if (radio_lamp == "Single") {
          this.lampcontrolOffset = { width: 90, height: 280 };
          this.readlampenable = false;
        } else if (radio_lamp == "Region") {
          this.lampcontrolOffset = { width: 90, height: 220 };
          this.readlampenable = true;
        } else if (radio_lamp == "All") {
          this.readlampenable = true;
        }
      }
    },
    handleSelectMenu(row) {
      if(row == '4'){
        this.deviceControlVisible = true;
        this.Lampdialog1Visible = false;
        this.AlarmlogdialogVisible = false;
        this.FreezedatadialogVisible = false;
        this.NewalarmdialogVisible = false;
        this.energyanalysisVisible = false;
        this.strategydialogVisible = false;
      }else{
        this.deviceControlVisible = false;
      }
    },
    handleCloseMenu(row){
        this.deviceControlVisible = false;
    },
    getAllUserList() {
        deptsTreeSelect().then((response) => {
          if (response.data.length > 0) {
              this.deptOptions = this.replaceGroupChildrenWithChildren(response.data);
          } else {
              this.deptOptions = {};
          }
      });
    },
    replaceGroupChildrenWithChildren(treeData) {
        return treeData.map((newNode) => {
            if(newNode.groupId){
              newNode.disabled=false;
            }else{
              newNode.disabled=true;
            }
            if (newNode.groupChildren && newNode.groupChildren.length > 0) {
                for (let i in newNode.groupChildren) {
                    newNode.groupChildren[i].label = newNode.groupChildren[i].groupName;
                    newNode.groupChildren[i].disabled=false;
                    newNode.groupChildren[i].deptUserId = newNode.deptUserId;
                    newNode.groupChildren[i].id = 'a-' + newNode.groupChildren[i].groupId;
                }
                let obj = {
                    label: this.$t('title.tunnellightingsystem_systemmanagement_title_groupinformation'),
                    id: 0,
                    children: newNode.groupChildren,
                };
                if (newNode.children && newNode.children.length > 0) {
                    newNode.children.unshift(obj);
                } else {
                    newNode.children = [obj];
                }
            }
            // 如果节点有 children，递归处理子节点
            if (newNode.children && newNode.children.length > 0) {
                this.replaceGroupChildrenWithChildren(newNode.children);
            }
            return newNode;
        });
    },
    menuchange(){
      //选中节点数据
      if(this.controlVal != null)
      {
        if(this.controlVal[1] == 'dimmer'){
          this.changecommand = this.controlVal[2]
        }else{
          this.changecommand = this.controlVal[1]
        }
      }
      else
      {
        this.changecommand = ''
      }
    },
    loadNode(node,resolve){
          if(node.level == 0){
          deptsTreeSelect().then((response) => {
              if (response.data.length > 0) {
                  this.deptOptions = this.replaceGroupChildrenWithChildren(response.data);
              } else {
                  this.deptOptions = {};
              }
              resolve(this.deptOptions);
          });
          }else{
            let queuryParams = {
              pageNum: 1,
              pageSize: 999,
              showChild: true,
            };
            console.log(node)
            if(node.parent.key == 0){
              queuryParams.groupId = node.data.groupId;
            }else{
              if(node.level>0){
                 queuryParams.deptId = node.key;
              }
            }
            function findArrayByIdDFS(arr, targetId , key) {
            let stack = [...arr];
            
            while (stack.length > 0) {
              let current = stack.pop();

              // 如果找到匹配的 id，返回该元素
              if(key){
                if(current.id == key){
                  return current.children[0]
                }
              }else{
                if (current.id === targetId) {
                  return current;
                }
              }

              // 如果当前元素有子数组，将子数组的元素加入栈中
              if (current.children && current.children.length > 0) {
                stack.push(...current.children);
              }
            }

            return null; // 如果没有找到匹配的 id，返回 null
          }
          let key = null;
          if(node.key == 0){
            key = node.parent.key;
          }

          let result = findArrayByIdDFS(this.deptOptions, node.key ,key);
          if(result.children && result.children.length > 0){
            resolve(result.children);
          }
          if(node.level != 0 && !result.children){
            listDeviceShort(queuryParams).then((res) => {
              if (res.code == 200) {
                let list = []
                for(let i in res.rows){
                  let obj = {
                    id: res.rows[i].deviceId,
                    label: res.rows[i].deviceName,
                    longitude: res.rows[i].longitude,
                    latitude: res.rows[i].latitude,
                    leaf: true,
                    productId: res.rows[i].productId,
                    serialNumber: res.rows[i].serialNumber,
                  }
                  list.push(obj)
                }
                resolve(list);
              }
            });
          }
          }  
    },
    handleNodeClick(node){
      let msg = {
        latitude: node.latitude,
        longitude: node.longitude,
      }
      if(node.latitude!=undefined || node.latitude!=null){
        this.lamplocation(msg)
      }
    },
    handleCheckChange(data,node){
      if(data.serialNumber){
        getDeviceRunningStatus({deviceId:data.id})
          .then((response) => {
            this.deviceListInfo = response.data.thingsModels;
            this.deviceStatus = response.data.status;
          })
      }
      this.$refs.tree.setCheckedKeys([data.id]);
    },
    closeLeftMenu(){
      this.deviceControlVisible = false;
      this.openeds = []
    },
    executeOrder(){
        let that = this;
        let list = this.$refs.tree.getCheckedNodes();
        console.log(list);
        let modelName = null;
        let identifier = null;
        let isShadow = false;
        let text1, text2, text3, text4;
        if (sessionStorage.lang == "zh-cn") {
          text1 = "切换手自动状态";
          text2 = "服务调用成功!";
          text3 = "设备不在线，无法操作！";
          text4 = "灯控器业务功能";
        } else {
          text1 = "Switch between manual and automatic modes";
          text2 = "Service call successful!";
          text3 = "The device is not online and cannot be operated!";
          text4 = "Business functions of light controller";
        }
        if(this.controlVal != "" && this.productType != null){
          let type = this.controlVal[0]
          let command = this.controlVal[1]
          let value = this.controlVal[2]
          let data = null;
          if(type == "control"){
              switch(command){
              case 'on':
                data = [
                  { id: "DBIZ_Dim", remark: "", value: 100 },
                  { id: "DBIZ_Color", remark: "", value: 100 }
                ];
                modelName=text4;
                identifier="DBIZ";
              break;
              case 'off':
                data = [
                  { id: "DBIZ_Dim", remark: "", value: 0 },
                  { id: "DBIZ_Color", remark: "", value: 0 }
                ];
                modelName=text4;
                identifier="DBIZ";
              break;
              case 'dimmer':
                data = [{ id: "DBIZ_Dim", remark: "", value: value }];
                identifier = "DBIZ_Dim";
                modelName = this.$t(
                  "title.tunnellightingsystem_statisticanalysis_title_dimmingvalue"
                );
              break;
              case 'dimmer2':
                data = [{ id: "DBIZ_Color", remark: "", value: value }];
                identifier = "DBIZ_Color";
                modelName = this.$t(
                  "title.tunnellightingsystem_statisticanalysis_title_colortemperaturevalue"
                );
              break;
              case 'resume':
                data = [{ id: "DBIZ_Hand", remark: "", value: "0" }];
                identifier = "DBIZ_Hand";
                modelName = text1;
              break;
            }
            if(list.length > 0){
              let params={
                identifier: identifier,
                isShadow: isShadow,
                modelName: modelName,
                productId: this.productType,
                remoteCommand: data,
                serialNumber: 'all',
                type: 2,
              };
              if(list[0].groupOrder!= undefined){
                params.groupOrder = list[0].groupOrder;
                params.userId = list[0].deptUserId;
                broadcastMultiInvoke(params).then((res)=>{
                  if (res.code == 200) {
                      this.$message({
                        type: "success",
                        message: text2,
                      });
                    }
                })
              }else{
                params.serialNumber = list[0].serialNumber;
                if(data.length>1){
                  serviceMultiInvoke(params).then((res) => {
                    if (res.code == 200) {
                      this.$message({
                        type: "success",
                        message: text2,
                      });
                    }
                  });
                }else{
                  let valueText = params.remoteCommand[0].value;
                  if(params.identifier == "DBIZ_Dim"){
                    params.remoteCommand = { "DBIZ_Dim": valueText };
                  }else if(params.identifier == "DBIZ_Color"){
                    params.remoteCommand = { "DBIZ_Color": valueText };
                  }else if(params.identifier == "DBIZ_Hand"){
                    params.remoteCommand = { "DBIZ_Hand": valueText };
                  }
                  serviceInvoke(params).then((res) => {
                    if (res.code == 200) {
                      this.$message({
                        type: "success",
                        message: text2,
                      });
                    }
                  });
                }
              }
          }else{
            this.$message({
              type: "error",
              message: this.$t('title.tunnellightingsystem_systemmanagement_title_pleaseselectgroupordevice'),
            });
          }
          }else{
             if(list[0].serialNumber){
                list[0].isShadow = 0;
                list[0].status = that.deviceStatus;
                that.readlampstate(list[0])
              }
          }
          
        }else if(this.productType == null){
           this.$message({
            type: "error",
            message: this.$t('title.tunnellightingsystem_systemmanagement_title_pleaseselectproductType'),
          });
        }else{
          this.$message({
            type: "error",
            message: this.$t('title.tunnellightingsystem_systemmanagement_title_pleaseentercondition'),
          });
        }
        
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }

  },
};
</script>
  
  <style scoped>
.from-msg >>> .el-input__icon {
  line-height: 30px;
}
.from-msg >>> .el-form-item__content {
  line-height: 30px;
}
.from-msg >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.from-msg >>> .el-form-item__label {
  line-height: 30px;
}
.from-msg >>> .el-form-item {
  margin-bottom: 20px;
  width: 340px;
}
.subfrom::before {
  content: " ";
  clear: both;
  display: block;
}
.subfrom .el-select {
  display: block;
}
.sunbfrom2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}

#root::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}
#root::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.map {
  width: 100%;
  height: 100% !important;
  margin: 0px;
  padding: 0px;
  position: absolute;
  overflow: hidden;
  z-index: 0;
}
a.eventnum {
  color: #c7c7c7;
  text-decoration: none;
  font-size: 16px;
  font-weight: bolder;
  cursor: pointer;
}
img {
  border-style: none;
}
ol,
ul {
  list-style: none;
}
.notenum {
  position: relative;
  margin: 10px 60px 0 0;
  padding-left: 30px;
  width: 90px;
  background: #1b1b1b;
  float: left;
  color: #fff;
  border: 1px solid brown;
  line-height: 28px;
  border-radius: 20px;
  text-align: center;
}
.resetstyle {
  cursor: pointer;
}
.maptoolsimg {
  background-color: #ffffff;
  height: 30px;
  width: 30px;
  border-radius: 8px;
  text-align: center;
  line-height: 30px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
}
.overview_head {
  height: 5px;
  border-radius: 7px 7px 0 0;
  padding-left: 15px;
  position: relative;
  cursor: move;
}
.overview_body {
  padding: 0px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
}
.overview_echart {
  width: 540px;
  height: 250px;
  border: 6px solid rgb(222, 223, 225);
  border-radius: 25px;
  box-sizing: border-box;
  position: relative;
  margin-top: 15px;
  background: rgb(255, 255, 255);
  position: relative;
  padding: 8px 5px 8px 5px;
  margin: 8px 5px 8px 5px;
}
.overview_rtu_echart {
  width: 100%;
  height: 100%;
  border: 1px solid #edeef0;
  border-radius: 2px;
  box-sizing: border-box;
  margin-bottom: 5px;
  background: #ffffff;
}
.echart_title {
  font-family: Arial, Helvetica, SimSun, sans-serif;
  font-size: 12px;
  margin-left: 45%;
}
.div_any_title {
  background-color: #16a0b1;
  border-radius: 15px;
  position: absolute;
  height: 35px;
  width: 50%;
  top: -20px;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  left: 25%;
  padding-bottom: 2px;
  line-height: 32px;
  text-align: center;
  border: 2px solid rgb(222, 223, 225);
}
.modal_overview {
  z-index: 1;
  left: 25%;
  height: 610px;
  width: 1120px;
  position: absolute;
  top: 14%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_overview >>> .el-select-dropdown__item {
  font-size: 10px;
  padding: 5px 20px;
  height: 20px;
  line-height: 15px;
}
.modal_overview >>> .el-input__inner {
  height: 20px;
  line-height: 20px;
  font-size: 10px;
}
.modal_overview >>> .el-input {
  width: 60%;
}
.modal_overview >>> .el-select .el-input .el-select__caret {
  font-size: 10px;
}
.modal_overview >>> .el-input--mini .el-input__icon {
  line-height: 22px;
}
.ant {
  margin: 0 7px;
}
.ant-dropdown-menu-item {
  padding: 0;
  border-bottom: 1px solid #2e2e2e;
  margin: 0;
  clear: both;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  cursor: pointer;
}
.ant-dropdown {
  position: absolute;
  z-index: 400;
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  left: 1420px;
  top: 50px;
  background-color: #1b1b1b;
  border-radius: 5px;
}
.ant-dropdown-menu {
  outline: none;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: left;
  background-color: #1b1b1b;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.ant-dropdown-menu-item > a {
  color: #c6c6c6;
  display: block;
  padding: 0 5px;
  width: 80px;
  padding: 7px 8px;
  margin: 0;
  text-decoration: none;
}
.modal_deviceinfo {
  z-index: 0;
  left: 330px;
  height: 545px;
  width: 370px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_rtuparam2 {
  z-index: 1;
  left: 710px;
  height: 545px;
  width: 545px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_rtuparam3 {
  z-index: 1;
  left: 710px;
  height: 290px;
  width: 470px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_lampparam1 {
  z-index: 1;
  left: 710px;
  height: 265px;
  width: 700px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_lampparam2 {
  z-index: 1;
  left: 710px;
  height: 260px;
  width: 700px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_lampparam3 {
  z-index: 1;
  left: 710px;
  height: 220px;
  width: 600px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_device {
  z-index: 1;
  left: 330px;
  height: 700px;
  width: 1225px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_deviceControl{
  z-index: 1;
  left: 330px;
  height: 545px;
  width: 370px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.rtuinfo2{
  margin:0 10px;
  line-height: 24px;
  width: 350px;
  height: 504px;
  border-radius: 5px;
  font-size:14px;
  line-height:20px;
  color: #333;
  font-family: Arial,Helvetica,SimSun,sans-serif;
  background-color: #fff;
  padding: 10px;
}
.selectProduct{
  margin: 10px 0 5px 0;
  width: 193px;
}
.selectProduct >>> .el-input__inner {
  height: 28px;
}
.selectProduct >>> .el-input__icon{
  line-height: 28px;
}
.modal_forms {
  z-index: 1;
  left: 330px;
  height: 600px;
  width: 1200px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_forms_free{
  z-index: 1;
  left: 330px;
  height: 860px;
  width: 1500px;
  position: absolute;
  top: 7%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_forms2{
  z-index: 1;
  left: 330px;
  height: 860px;
  width: 1500px;
  position: absolute;
  top: 7%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_freezedata {
  width: 1500px;
}
.modal_account {
  z-index: 1;
  left: 330px;
  height: 610px;
  width: 1200px;
  position: absolute;
  top: 12%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_devicemanage {
  z-index: 1;
  left: 20%;
  height: 600px;
  width: 400px;
  position: absolute;
  top: 10%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_deviceadd {
  z-index: 1;
  left: 150px;
  height: 600px;
  width: 750px;
  position: absolute;
  top: 10%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.modal_devicemax {
  z-index: 4;
  left: 0px;
  height: 100%;
  width: 100%;
  position: fixed;
  background: #3586ff;
  box-shadow: 0 0 10px #888;
}
.modal_changepw {
  z-index: 4;
  left: 35%;
  top: 25%;
  height: 290px;
  width: 500px;
  position: fixed;
  background: #3586ff;
  box-shadow: 0 0 10px #888;
  border-radius: 5px;
}
.modal_logout {
  z-index: 4;
  left: 50%;
  top: 25%;
  margin-left: -125px;
  height: 100px;
  width: 250px;
  position: fixed;
  background: #3586ff;
  box-shadow: 0 0 10px #888;
  border-radius: 5px;
}

.windowinfocontain {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100px;
  width: 100px;
  background-color: transparent;
  z-index: 999 !important;
}
#markerrtuinfo {
  width: 155px;
}
.markercontrolinfo {
  margin: 10px;
  line-height: 24px;
  width: 135px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
  font-family: Arial, Helvetica, SimSun, sans-serif;
  box-shadow: darkgrey 0px 0px 10px 2px;
  border-radius: 5px;
}
.deviceSytle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rtuinfo {
  margin: 0 10px;
  line-height: 24px;
  width: 350px;
  height: 504px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  background-color: #edeef0;
}
.lamprunparaminfo {
  margin: 0 10px;
  line-height: 24px;
  width: 580px;
  height: 180px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  background-color: #edeef0;
}
.netparaminfo {
  margin: 0 10px;
  line-height: 24px;
  width: 524px;
  height: 504px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  background-color: #edeef0;
}
.runparaminfo >>> .el-form-item__label {
  font-size: 12px;
  line-height: 28px;
  padding: 0 5px 0 0;
}
.runparaminfo >>> .el-radio {
  margin-right: 10px;
}
.runparaminfo >>> .el-radio__inner {
  height: 12px;
  width: 12px;
}
.runparaminfo >>> .el-radio__label {
  font-size: 12px;
}
.runparaminfo {
  margin: 0 10px;
  line-height: 24px;
  width: 450px;
  height: 250px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  background-color: rgba(255, 255, 255, 1);
}
.lampinfo {
  height: 485px;
}
.markerinfo {
  margin: 10px;
  line-height: 24px;
  width: 240px;
  height: 330px;
  font-size: 12px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
  font-family: Arial, Helvetica, SimSun, sans-serif;
  box-shadow: darkgrey 0px 0px 10px 2px;
  border-radius: 5px;
}
#markertitle {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #3586ff;
  width: 100%;
  height: 30px;
  padding-top: 0.1px;
}
.infoWindowtitle {
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  margin: 5px 0;
}
.markerinfo .left {
  width: 35%;
  text-align: left;
  font-size: 12px;
  float: left;
  color: #888;
  padding-left: 12px;
  margin-top: 4px;
}
.left {
  height: 28px;
  vertical-align: bottom;
}
.markerinfo .right {
  width: 60%;
  height: 24px;
  font-size: 12px;
  color: #000000;
  border: 0.5px solid rgba(52, 139, 255, 0.73);
  border-radius: 5px;
  float: right;
  padding: 0px 20px 0px 5px;
  /* margin-top: 8px */
  margin-right: 10px;

  white-space: nowrap; /*强制span不换行*/
  display: inline-block; /*将span当做块级元素对待*/

  overflow: hidden; /*超出宽度部分隐藏*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
  line-height: 24px; /*数字与之前的文字对齐*/
}
/* 箭头图表去除 */
.map >>> .BMap_pop img {
  display: none;
}
/* 阴影去除 */
.map >>> .BMap_shadow {
  display: none;
}
/* 隐藏边角 */
.map >>> .BMap_pop div:nth-child(1),
.map >>> .BMap_pop div:nth-child(2),
.map >>> .BMap_pop div:nth-child(3),
.map >>> .BMap_pop div:nth-child(4),
.map >>> .BMap_pop div:nth-child(5),
.map >>> .BMap_pop div:nth-child(6),
.map >>> .BMap_pop div:nth-child(7),
.map >>> .BMap_pop div:nth-child(8) {
  display: none;
}
/*地图标题*/
.map >>> .BMap_pop .BMap_bubble_title {
  display: block !important;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
/* 消息内容 */
.map >>> .BMap_pop .BMap_bubble_content {
  display: block !important;
}

.map >>> .BMap_pop .BMap_bubble_content div:nth-child(1) {
  display: block !important;
}

/* 内容 */
.map >>> .BMap_pop div:nth-child(9) {
  border-radius: 5px;
  width: auto !important;
  height: auto !important;
  z-index: 999 !important;
}

/* 百度文字 */
.map >>> .BMap_cpyCtrl {
  display: none;
}
/* 百度logo图片 */
.map >>> .anchorBL {
  display: none;
}
.map >>> .BMap_bubble_pop {
  border: none !important;
  background-color: transparent !important;
}
.map >>> .BMap_bubble_buttons {
  display: none;
}
.map >>> .shadow img {
  display: none;
}
.zoom {
  width: 30px;
  height: 61px;
  background-color: #ffffff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 8px;
}
.zoomin {
  cursor: pointer;
  width: 14px;
  height: 14px;
  margin-bottom: 8px;
  background: url("../../assets/image/zoomin.png") no-repeat 50%;
}
.zoomsmall {
  margin-top: 8px;
  cursor: pointer;
  width: 14px;
  height: 14px;
  background: url("../../assets/image/zoomout.png") no-repeat 50%;
}
.card >>> .el-tabs__item {
  font-size: 12px !important;
}
.card >>> .el-table {
  font-size: 12px !important;
}
.card >>> #tab-0 {
  padding: 0 60px;
  width: 151px;
}
.card >>> #tab-1 {
  padding: 0 60px;
  width: 151px;
}
.card >>> #tab-2 {
  padding: 0 30px;
}
.table >>> .el-input {
  font-size: 12px !important;
}
.card >>> .el-tabs__content {
  padding: 0px;
  height: 264.5px;
}

.devicename {
  font-size: 14px;
  color: #0d39ff;
}
.deviceleft {
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
}
.devicebottom {
  margin-bottom: 15px;
}
.content-top {
  margin-top: 15px;
}
.deviceright {
  display: flex;
  float: right;
  margin-right: 20px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0px;
  border-top: 1px solid #e2e2e2;
}
.zoom_line {
  height: 1px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: -2.5px;
  width: 140%;
  border-top: 1px solid #cacaca;
}
div.deviceimg > img:first-child {
}
a {
  text-decoration: none;
}
.rtuimg {
  background: url("../../assets/image/lamp1.png") no-repeat 50%;
}
#wrapper {
  text-align: center;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
}

#toolbar {
  width: 100%;
  max-width: 670px;
  min-width: 550px;
  margin: 70px auto;
}

.button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #3ab09e;
  color: #ffffff;
  text-align: center;
  font-size: 3.5em;
  position: relative;
  left: 50%;
  margin-left: -35px;
}

.button:hover {
  cursor: pointer;
}

.button,
.icons {
  -webkit-transition: -webkit-all 1s cubic-bezier(0.87, -0.41, 0.19, 1.44);
  transition: all 1s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}

.button:after {
  content: "+";
}

.buttonactive {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 40%;
}

.icons {
  width: 0%;
  overflow: hidden;
  height: 28px;
  list-style: none;
  padding: 16px 10px 10px 50px;
  background-color: #fff;
  box-shadow: 1px 1px 1px 1px #dcdcdc;
  margin: -68px 0 0 45%;
  border-radius: 2em;
  color: black;
}

.iconsactive {
  width: 80%;
  margin: -68px 0 0 35%;
  overflow: hidden;
}

.icons li {
  display: none;
  width: 10%;
  color: #3ab09e;
}

.iconsactive li {
  width: 16%;
  display: inline-block;
  color: #0d9c0e;
}
.querytable {
  border-bottom-right-radius: 10px;
}
.querytable >>> .el-table td {
  border-bottom: 0px;
}
.querytable >>> .rtucss {
  color: #c52623;
}
.querytable >>> .lampcss {
  color: #3b8321;
}
.querytable >>> .loopcss {
  color: #149fb0;
}
.querytable >>> .sensorcss {
  color: #eab140;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.top_left_search {
  position: absolute;
  top: 50px;
  left: 0px;
  height: 100%;
  width: 320px;
  bottom: 0;
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.searchcontainer >>> .el-input__inner {
  height: 44px;
  padding: 0 0;
}

.searchcontainer >>> .el-input input {
  border: none;
}
.searchcontainer >>> .el-input {
  top: -15px;
}
.querybox {
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
}
.searchcontainer:hover {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -2px 0px rgba(0, 0, 0, 0.02);
}
.fastsearchtitle {
  font: 20px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;
  background-color: #3586ff;
  width: 100%;
  height: 39px;
  padding: 10px 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #ffffff;
}
.fastsearchcontainer {
  position: absolute;
  top: 120px;
  left: 10px;
  height: 340px;
  width: 290px;
  background-color: #5daf34;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -2px 0px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}
.searchcontainer {
  z-index: 1;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 290px;
  height: 50px;
  background: #fff;
  border: 1px solid #d4d4d4;
  box-shadow: 0 0.1px 0.1px rgba(0, 0, 0, 0.2), 0 -0.1px 0px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  transition-property: background, box-shadow;
  transition-duration: 0.5s;
  border-radius: 8px;
  margin: 5px 10px;
}
.button-container {
  position: absolute;
  z-index: 0;
  left: 321px;
  top: 40%;
}
.button-pane-toggle {
  width: 23px;
  height: 48px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9) url("../../assets/image/leftarrow.png")
    7px center/7px 10px no-repeat;
  border-left: 1px solid #d4d4d4;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
}
.button-pane-toggle-back {
  background: rgba(255, 255, 255, 0.9) url("../../assets/image/rightarrow.png")
    7px center/7px 10px no-repeat;
}
#queryimg {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 5px;
}
#menuimg {
  margin: 10px 2px 9px 6px;
  height: 26px;
  width: 26px;
}
.barimg {
  height: 40px;
  width: 40px;
}
.searchcontainer >>> .el-input--suffix .el-input__inner {
}
.linebar1 {
  width: 100%;
  margin-top: 70px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
}
.linebar2 {
  width: 100%;
  margin-top: 10px;
  height: 10px;
  background-color: #f5f5f5;
}
.top_left_search >>> .el-collapse-item__header {
  height: 60px;
  color: #08beff;
  margin: 5px 10px;
  font: 20px/1.5 Tahoma, Helvetica, Arial, "宋体", sans-serif;
}
.bg-purple {
  width: 24px;
  height: 28px;
  margin-left: 9px;
  margin-top: 5px;
}
.grid-content {
  margin-left: 10px;
  border-radius: 10%;
  height: 25px;
  width: 25px;
  cursor: pointer;
}
.fastsearch-device {
  margin: 10px 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.bgcolor1 {
  background-color: #c52421;
}
.bgcolor2 {
  background-color: #149fb0;
}
.bgcolor3 {
  background-color: #3a821f;
}
.bgcolor4 {
  background-color: #ff920f;
}
.panetoggle >>> .el-submenu__title {
  height: 60px;
  font: 20px/3 Tahoma, Helvetica, Arial, "宋体", sans-serif;
}
.panetoggle >>> .el-submenu .el-menu-item {
  height: 50px;
  font: 16px/3 Tahoma, Helvetica, Arial, "宋体", sans-serif;
  border-top: 0.1px solid rgba(236, 236, 236, 0.88);
  border-bottom: 0.1px solid rgba(236, 236, 236, 0.88);
}

.el-container {
  border-top: 1px solid #cacaca;
}
.fastsearchcontent {
  display: flex;
}
.searchicon {
  width: 20%;
  height: 300px;
  background-color: #f4f4f4;
  border-bottom-left-radius: 10px;
}
.alarminfo {
  display: inline-block;
  margin: 10px 10px;
}
.userinfo {
  top: 60px;
  right: 80px;
}
.top-bar {
  position: absolute;
  top: 60px;
  right: 50px;
}
.top-left {
  display: inline-block;
  height: 34px;
  width: 100px;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
  line-height: 34px;
  float: left;
  cursor: pointer;
  font-style: normal;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  background: #fff;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
}
.top-left-alarmimg {
  position: relative;
  top: 4px;
  margin-left: 3px;
}
.top-user {
  display: inline-block;
  height: 52px;
  width: 52px;

  cursor: pointer;
  position: relative;
  top: -10px;
  margin-left: 20px;
  float: right;
}
.top-user-img {
  position: absolute;
}
.userimg {
  float: left;
  margin-top: -4px;
  margin-right: 30px;
}
.drop-down-usermenucontain {
  height: 100%;
  width: 100%;
  margin-top: 5px;
  box-shadow: darkgrey 0px 0px 10px 2px;
  border-radius: 4px;
}
.drop-down-usermenu {
  height: 320px;
  width: 280px;
  position: absolute;
  right: 0;
  border-radius: 4px;
}
.drop-down-usermenu-triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #3586ff;
  position: absolute;
  right: 18px;
  top: -3px;
}
.drop-down-usermenu-top {
  width: 100%;
  height: 25%;
  background-color: #3586ff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#usermenu-user {
  padding: 11px 15px;
}
.drop-down-usermenu-bottom {
  width: 100%;
  height: 75%;
  background-color: #ffffff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.usermenu-li {
  text-align: left;
  font-size: 14px;
  line-height: 46px;
  height: 46px;
  color: #333;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  margin-left: 5px;
}
.usermenu-quit {
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  cursor: pointer;
  border-top: 7px solid #f5f5f5;
  color: #333;
  font-family: Arial, Helvetica, SimSun, sans-serif;
}
#username {
  font-family: Arial, Helvetica, SimSun, sans-serif;
  font-size: 20px;
  color: #ffffff;
  position: absolute;
  text-align: center;
  margin-left: 15px;
  margin-top: 15px;
}
#user-edit {
  position: absolute;
  right: 15px;
  top: 15px;
  color: #ffffff;
  cursor: pointer;
}
#searchline {
  display: inline-block;
  height: 28px;
  margin: 5px 2px;
  border-right: 1px solid #d4d4d4;
}
.controlpanle {
  background-color: #0d9c0e;
  width: 100px;
  height: 200px;
}
.textitem >>> .el-button {
  font-size: 12px;
  line-height: 18px;
}
.textitem {
  padding: 6px 0;
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  padding-left: 18px;
  color: #000000;
}
.sceneli {
  padding-left: 10px;
  padding-right: 10px;
}
.textitem:hover {
  background-color: #3687ff;
  color: #ffffff;
}
.textitem >>> .el-dropdown:hover {
  background-color: #3687ff;
  color: #ffffff;
}
.el-dropdown-link {
  width: 100%;
  display: inline-block;
  height: 100%;
  line-height: 100%;
}
.el-dropdown-link:hover {
  background-color: #3687ff !important;
  color: #ffffff !important;
}
.topline {
  border-top: 1px solid #d7d8da;
}
#root >>> .el-dialog__header {
  background-color: #3687ff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 20px 20px 20px;
}
#root >>> .el-dialog__title {
  color: #ffffff;
}
#root >>> .el-dialog--center {
  border-radius: 5px;
}
#root >>> .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #ffffff !important;
  background-color: #3687ff !important;
}
.el-dropdown-menu {
  margin-top: -35px !important;
  margin-right: -177px !important;
}
.dimmervalue {
  width: 60px;
  height: 180px;
  background-color: #ffffff;
  position: absolute;
  top: 100px;
  left: 200px;
  border-radius: 5px;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  box-shadow: darkgrey 0px 0px 3px 1px;
  z-index: 999 !important;
}
.scenechange {
  height: 240px;
}
.markercontrolinfo >>> .el-button {
  padding: 0px 0px;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  color: #333;
}
.markercontrolinfo >>> .el-button:hover {
  color: #ffffff;
}
.markercontrolinfo >>> .el-radio-button {
  width: 49.9999%;
}
.markercontrolinfo >>> .el-radio-button__inner {
  width: 100%;
}
.commandmsgtext {
  font-size: 16px;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  color: #333;
}
.usertext {
  font-size: 12px;
  font-family: Arial, Helvetica, SimSun, sans-serif;
  color: #333;
}
.lampstate {
  margin-left: 25px;
  margin-bottom: 5px;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  font-size: 14px;
}
#root >>> .el-dialog {
  border-radius: 5px;
}
.el-header,
.el-footer {
  background-color: #3586ff;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.rtuinfo >>> .el-date-editor--daterange.el-input__inner {
  width: 250px;
}
.rtuinfo >>> .el-range-editor--mini.el-input__inner {
  height: 24px;
}
.rtuinfo >>> .el-date-editor .el-range-separator {
  padding-right: 10px;
}
.rtuinfo >>> .el-tabs--border-card > .el-tabs__content {
  padding-top: 5px;
}
.rtuinfo >>> .el-button {
  line-height: 0.7;
  margin-left: 8px;
}
.lampinfo >>> .el-button {
  margin-left: 0px;
}
.rtuinfo >>> .el-range-editor.el-input__inner {
  padding-top: 0px;
}
.group-class {
  display: inline-block;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background: url("../../assets/image/group.png") no-repeat 50%;
  background-position-x: center;
  background-position-y: center;
  background-size: 14px 18px;
}
.father-class {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../../assets/image/jizhongqi_1.png") no-repeat 50%;
  background-position-x: center;
  background-position-y: center;
  background-size: 14px 16px;
}
.leaf-lamp-class {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../../assets/image/lamp1.png") no-repeat 50%;
  background-position-x: center;
  background-position-y: center;
  background-size: 14px 16px;
}
/deep/ .el-tree-node__content {
  width: auto;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  font-size: 16px;
  line-height: 38px;
}

.rtu_parent {
  width: 100%;
  height: 280px;
  display: flex;
  margin-bottom: 4px;
}
.lamp_parent {
  height: 425px;
}
.rtu_left {
  width: 60%;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
}
.rtu_right {
  flex: 1;
  height: 100%;
  background: #ffffff;
  margin-left: 2px;
}

.rtuinfo_parent {
  width: 100%;
  height: 170px;
  display: flex;
}
.rtuinfo_left {
  width: 32.5%;
  height: 100%;
  background: #ffffff;
}
.rtuinfo_right {
  flex: 1;
  height: 100%;
  background: #ffffff;
  margin-left: 2px;
}
.rtuinfo_middle {
  width: 32.5%;
  height: 100%;
  background: #ffffff;
  margin-left: 2px;
}
.rtuinfo >>> .el-tabs--border-card > .el-tabs__content {
}
.rtu_parent >>> .el-card__body {
  height: 280px;
}
.lampinfo >>> .el-card__body {
  height: 425px;
}
.rtuinfo_parent >>> .el-card__body {
  height: 165px;
}
.rtuinfo >>> .el-card:hover {
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.2), 0 0px 4px rgba(0, 0, 0, 0.02);
}
.loopimg {
  display: inline-block;
  width: 34px;
  height: 34px;
  background: url("../../assets/image/loopinfo.png") no-repeat 50%;
  background-size: 30px 30px;
}
.lampimg {
  display: inline-block;
  width: 34px;
  height: 34px;
  background: url("../../assets/image/lampinfo.png") no-repeat 50%;
  background-size: 30px 30px;
}
.sensorimg {
  display: inline-block;
  width: 34px;
  height: 34px;
  background: url("../../assets/image/sensorinfo.png") no-repeat 50%;
  background-size: 30px 30px;
}
.rtuinfo_title {
  font-size: 16px;
  position: relative;
  top: -12px;
  font-weight: bold;
}
.rtuinfo >>> .el-card__body {
  padding: 3px;
}
.rtuinfo >>> .el-form-item__label {
  line-height: 8px;
  padding: 0px;
  font-size: 8px;
  color: #8f8f90;
}
.lampinfo >>> .el-form-item__label {
  line-height: 20px;
  padding: 4px 0px;
  font-size: 12px;
}
.rtuinfo >>> .el-input__inner {
  height: 24px;
  line-height: 24px;
  padding: 0px;
  font-size: 10px;
}
.rtuinfo >>> .el-form-item {
  margin-bottom: 0px;
}
.sensor_state {
  margin-top: 10px;
  margin-bottom: 10px;
}
.sensor_state >>> .el-form-item {
  margin-bottom: 6px;
}
.rtuinfo >>> .el-form-item__content {
  line-height: 0px;
}
.rtuinfo >>> .el-input.is-disabled .el-input__inner {
  border: 0.5px solid #d8d8d8;
  color: black;
  background-color: #edeef0;
  cursor: auto;
}
.rtuinfo_lampleft {
  font-size: 8px;
}
.rtuinfo_lampright {
  font-size: 14px;
  line-height: 16px;
  color: #04a600;
}
.rtubox-image {
  height: 100%;
  width: 100%;
}
.rtuinfo_manage_title {
  font-size: 10px;
  margin-top: 15px;
  margin-left: 5px;
}
.netparaminfo_state >>> .el-input__inner {
  height: 25px;
  line-height: 24px;
  padding: 0px;
  font-size: 12px;
  width: 98%;
  cursor: auto;
}
.netparaminfo_state >>> .el-form-item--mini.el-form-item {
  margin-bottom: 15px;
}
.netparaminfo_state >>> .el-form-item__label {
  line-height: 18px;
  padding: 0px 5px;
  font-size: 10px;
}
.lampinfo_state {
  margin-top: 5px;
}
.lampinfo_state >>> .el-form-item__label {
  line-height: 18px;
  padding: 0px 0px;
  font-size: 10px;
  margin-top: 5px;
}
.lampinfo_state >>> .el-input__inner {
  height: 20px;
  line-height: 18px;
  padding: 2px;
  font-size: 10px;
}
.rtuinfo_manage_img1 {
  width: 50px;
  height: 45px;
  margin-left: 5px;
  background-size: 50px 45px;
  background: url("../../assets/image/menu002-01.png") no-repeat 50%;
}
.rtuinfo_manage_img2 {
  width: 50px;
  height: 45px;
  margin-left: 5px;
  background-size: 50px 45px;
  background: url("../../assets/image/menu003-01.png") no-repeat 50%;
}
.rtuinfo_manage_img3 {
  width: 50px;
  height: 45px;
  margin-left: 5px;
  background-size: 50px 45px;
  background: url("../../assets/image/menu004-01.png") no-repeat 50%;
}
.rtuinfo >>> .el-tabs--border-card > .el-tabs__content {
  padding: 5px 5px 0px 5px;
  overflow: auto;
}
.lampinfo >>> .el-tag--mini {
  padding: 0 2px;
  line-height: 18px;
  margin-top: 5px;
}
.lampinfo >>> .el-tag {
  font-size: 10px;
}
.lampinfo_state >>> .el-input {
  width: 75%;
}
.modal_list {
  z-index: 1;
  right: 60px;
  height: 530px;
  width: 540px;
  position: absolute;
  top: 14%;
  background: #3586ff;
  border-radius: 7px;
  box-shadow: 0 0 10px #888;
}
.map >>> .mapBG2 {
  height: 30px;
  width: 30px;
  border-radius: 25px;
  background-color: #f2f2f2;
  position: relative;
}
.map >>> .mapBG2::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  top: -61px;
  left: -47px;
  border: 2px solid green;
  transform: scale(0.3);
  border-radius: 50%;
}
.map >>> .mapBG2::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  top: -61px;
  left: -47px;
  z-index: 1;
  border: 2px solid green;
  transform: scale(0.3);
  border-radius: 50%;
}
.map >>> .mapBG2::before {
  animation: ripple 1.6s linear infinite forwards;
}
.map >>> .mapBG2::after {
  animation: ripple 1.6s linear infinite forwards;
  animation-delay: 0.6s;
}
.map >>> .BMap_noprint {
  z-index: 10 !important;
}
.group-node{
  display: inline-block;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background: url("../../assets/image/group.png") no-repeat 50%;
  background-position-x: center ;
  background-position-y: center;
  background-size:14px 18px;
}
.device-node{
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../../assets/image/lamp1.png") no-repeat 50%;
  background-position-x: center ;
  background-position-y: center;
  background-size:14px 16px;
}
@keyframes ripple {
  form {
    transform: scale(0);
    opacity: 0.8;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}
</style>